jQuery UI

Widgets - Menu and Tooltip

by Ryan Morris

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<ul id="menu">
    <li class="ui-state-disabled">Aberdeen</li>
    <li>Ada</li>
    <li>Adamsville</li>
    <li>Addyston</li>
    <li>-</li>
    <li>Delphi
        <ul>
            <li class="ui-state-disabled">Ada</li>
            <li>Saarland</li>
            <li>Salzburg an der schönen Donau</li>
        </ul>
    </li>
    <li>Saarland</li>
    <li>Salzburg
        <ul>
            <li>Delphi
                <ul>
                    <li>Ada</li>
                    <li>Saarland</li>
                    <li>Salzburg</li>
                </ul>
            </li>
            <li>Delphi
                <ul>
                    <li>Ada</li>
                    <li>Saarland</li>
                    <li>Salzburg</li>
                </ul>
            </li>
            <li>Perch</li>
        </ul>
    </li>
    <li class="ui-state-disabled">Amesville</li>
</ul>
<br />
<!-- structure expects any parent-child relationship. UL>LI is typical, but so is DIV>DIV -->
<div id="divmenu">
    <div>One</div>
    <div>Two</div>
    <div>Three
        <div class="sub">
            <div>Sub one</div>
            <div>Sub two</div>
        </div>
    </div>
</div>

CSS

.ui-menu {
    width: 200px;
}

JavaScript

$(function () {

    $("#menu").menu();

    /*$("#divmenu").menu({
        menus: "div.sub"
    });/**/

});