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

Controlling the position of submenus

The menu widget uses the position widget to control the destination of any submenus when visible. The default is to place the top left of the submenu to the right of the menu item that expands the submenu. But depending on the size of our menu, the depth of the submenus, and other constraints around size in our UI, we might want to use different defaults for the submenu positions.

Getting ready

We will use the following HTML structure for this submenu positioning demonstration:

<ul id="menu"> <li><a href="#first">First Item</a></li> <li><a href="#second">Second Item</a></li> <li><a href="#third">Third Item</a></li> <li> <a href="#forth">Fourth Item</a> <ul> <li><a href="#fifth">Fifth</a></li> <li> <a href="#sixth">Sixth</a> ...

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