A Menu Bar widget is a set of navigational menu buttons that display submenus when a site visitor hovers over one of the buttons. Menu Bars let you display a large amount of navigational information in a compact space, and also give visitors to the site a sense of what is available on the site without having to browse it extensively.

Dreamweaver lets you insert two kinds of Menu Bar widgets: vertical and horizontal. The following example shows a horizontal Menu Bar widget, with the third menu item expanded:

View full size graphic

Menu Bar widget (consists of <ul>, <li>, and <a> tags)

A.

Menu item has submenu

B.

Submenu item has submenu

The HTML for the Menu Bar widget comprises an outer ul tag that contains an li tag for each of the top-level menu items. The top-level menu items (li tags) in turn contain ul and li tags that define submenus for each of the items, and submenus can likewise contain submenus. Top-level menus and submenus can contain as many submenu items as you like.

For a more comprehensive explanation of how the Menu Bar widget works, including a full anatomy of the Menu Bar widget’s code, see www.adobe.com/go/learn_dw_sprymenubar.

For a tutorial on creating a Spry Menu Bar, see www.adobe.com/go/vid0168.