Jquery ui menubar new

by FirstBug

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/pepper-grinder/jquery-ui.css">
<link rel="stylesheet" href="http://view.jqueryui.com/menubar/themes/base/jquery.ui.menubar.css">
<script src="http://view.jqueryui.com/menubar/ui/jquery.ui.menubar.js"></script>
<ul id="bar1" class="menubar">
    <li>	<a href="#File">File</a>
        <ul>
            <li><a href="#Open...">Open...</a>
            </li>
            <li class="ui-state-disabled">Open recent...</li>
            <li><a href="#Save">Save</a>
            </li>
            <li><a href="#Save as...">Save as...</a>
            </li>
            <li><a href="#Close">Close</a>
            </li>
            <li><a href="#Quit">Quit</a>
            </li>
        </ul>
    </li>
    <li>	<a href="#Edit">Edit</a>

        <ul>
            <li><a href="#Copy">Copy</a>
            </li>
            <li><a href="#Cut">Cut</a>
            </li>
            <li class="ui-state-disabled">Paste</li>
        </ul>
    </li>
    <li>	<a href="#View">View</a>

        <ul>
            <li><a href="#Fullscreen">Fullscreen</a>
            </li>
            <li><a href="#Fit into view">Fit into view</a>
            </li>
            <li>	<a href="#Encoding">Encoding</a>

                <ul>
                    <li><a href="#Auto-detect">Auto-detect</a>
                    </li>
                    <li><a href="#UTF-8">UTF-8</a>
                    </li>
                    <li> <a href="#UTF-16">UTF-16</a>

                        <ul>
                            <li><a href="#Option 1">Option 1</a>
                            </li>
                            <li><a href="#Option 2">Option 2</a>
                            </li>
                            <li><a href="#Option 3">Option 3</a>
                            </li>
                            <li><a href="#Option 4">Option 4</a>
                            </li>
                        </ul>
                    </li>
        ...

CSS

.ui-menu {
    width: 150px;
}

JavaScript

$(function () {
    function select(event, ui) {
        $("<div/>").text("Selected: " + ui.item.text()).appendTo("#log");
        if (ui.item.text() == 'Quit') {
            $(this).menubar('destroy');
        }
    }
    $("#bar1").menubar({
        autoExpand: true,
        menuIcon: true,
        buttons: false,
        position: {
            within: $("#demo-frame").add(window).first()
        },
        select: select
    });
    // testing Simple menu for hover effetc    
    $("#menu").menu();

});