Unobtrusive Javascript Menu Bar Samples

This page gives examples of how to style menu bars differently. This version uses the Spry Element Selector to fire off the widget constructors. They are kept in the 'menu_bar.js' file.


This is a standard horizontal menu bar. The top level menu items are next to each other from left to right, then all other submenu items are stacked vertically.


This is a standard vertical menu bar. All menu items are stacked vertically.


This is a menu bar with a background image rather than just background color for each menu item.


This is a menu bar with wider menu items.


This is a menu bar with menu items that only take up the space they need and are not a fixed width.


This is a menu bar which uses another icon to describe when there is a submenu and positions it on the left side of the text.


This is a menu bar which uses icons to call out certain menu items.