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

Applying themes to submenus

When the menu widget displays submenus, there is no discernible difference in appearance. That is, visually, they look just like the main menu. We wanted to present the user with a little contrast between the main menu and its children; we can do so by extending the widget to allow for custom classes to be applied to the submenus.

Getting ready

Let's use the following markup to create our menu widget with a couple submenus:

<ul id="menu"> <li><a href="#">First Item</a></li> <li><a href="#">Second Item</a></li> <li><a href="#">Third Item</a></li> <li> <a href="#">Fourth Item</a> <ul> <li><a href="#">Fifth</a></li> <li> <a href="#">Sixth</a> <ul> <li><a href="#">Seventh</a></li> <li><a href="#">Eighth</a></li> </ul> </li> ...

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