Highlight Selected Menu Item

Highlighting the selected jQuery UI menu item using clases from the theme framework.

HTML

<ul id="menu">
    <li class="ui-state-disabled"><a href="#">Aberdeen</a>
    </li>
    <li><a href="#">Ada</a>
    </li>
    <li><a href="#">Adamsville</a>
    </li>
    <li><a href="#">Addyston</a>
    </li>
    <li> <a href="#">Delphi</a>

        <ul>
            <li class="ui-state-disabled"><a href="#">Ada</a>
            </li>
            <li><a href="#">Saarland</a>
            </li>
            <li><a href="#">Salzburg</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Saarland</a>
    </li>
    <li> <a href="#">Salzburg</a>

        <ul>
            <li> <a href="#">Delphi</a>

                <ul>
                    <li><a href="#">Ada</a>
                    </li>
                    <li><a href="#">Saarland</a>
                    </li>
                    <li><a href="#">Salzburg</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">Delphi</a>

                <ul>
                    <li><a href="#">Ada</a>
                    </li>
                    <li><a href="#">Saarland</a>
                    </li>
                    <li><a href="#">Salzburg</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Perch</a>
            </li>
        </ul>
    </li>
    <li class="ui-state-disabled"><a href="#">Amesville</a>
    </li>
</ul>

CSS

/* Global settings */
body {
    font-size: 0.8em;
}

/* jQuery UI theme settings */
.ui-menu .ui-menu-item {
    margin: 1px 0;
    border: 1px solid transparent;
}

.ui-menu .ui-menu-item a.ui-state-highlight { 
    font-weight: normal; 
    margin: -1px; 
}

/* Demo settings */
#menu {
    width: 30%;
}

JavaScript

// Adds the "ui-state-highlight" class to the selected item. Also
// requires some theme CSS adjustments.
$( "#menu" ).menu({
    
    select: function( e, ui ) {
        
        // Remove the highlight class from any existing items.
        $( this ).find( "a.ui-state-highlight" )
                 .removeClass( "ui-state-highlight" );
     
        // Adds the "ui-state-highlight" class to the selected item.
        ui.item.find( "> a" )
               .addClass( "ui-state-highlight ui-corner-all" );     
    
    }
    
});