jquery drop-down menu

by Avinash_R

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<button>Settings</button>

<ul id="menu" style="position: fixed;" class="ui-helper-hidden">
    <li>
        <a href="#">Reorder Portlets</a>
    </li>
</ul>

CSS

button{
    float: right;
}

JavaScript

var settings = $("button").button({
    icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
    },
    text: false
});

var menu = $("#menu");
menu.menu().hide();
settings.click(function() {
    if (menu.is(":hidden")) {
        menu.position({
            my: "right top",
            at: "right bottom",
            of: settings
        }).slideDown();
        $(document).on("click.mymenu", function(e) {
            if (e.target === settings[0]) {
                return;
            }
            menu.slideUp();
            $(document).off("click.mymenu");
        });
    } else {
        menu.slideUp();
    }
});