O'Reilly logo

jQuery UI Cookbook by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required