Building menus dynamically

Often, the menus change during interaction with a user. In other words, we may need to extend the structure of the menu after the menu has been instantiated. Alternatively, we might not have all the necessary information available to us when building the HTML that ultimately becomes the menu widget; the menu data may only be available in JavaScript Object Notation (JSON) format, for instance. Let's look at how we can go about building menus dynamically.

Getting ready

We will start with the following basic menu HTML structure. Our JavaScript code will extend this.

<ul id="menu">
    <li><a href="#">First Item</a></li>
    <li><a href="#">Second Item</a></li>
    <li><a href="#">Third Item</a></li>
</ul>

How to do it...

Let's create the menu widget, and then we'll extend the structure of the menu DOM.

$(function() {

    var $menu = $( "#menu" ).menu(),
        $submenu = $( "<li&gt...