Menu G5 Examples: Menu bar on BrainJar.com

yxScripts.com

BrainJar.com has a nice tutorial on how to create a menu bar with CSS. Here we are trying to copy the style settings of the BrainJar.com menu bar.

The menu bar on BrainJar.com has the following behaviors:

• The menu bar is a fixed width DIV tag with menu items aligned to the left.
• Menu items are rendered with actual width.
• Click to open/collapse a sub-menu from the menu bar.
• The first level sub-menus are aligned on the left against their parent items on the menu bar.
• If a first level sub-menu is opened, hovering the menu bar will open other first level sub-menus.
• Hover to open a sub-menu from sub-menus.
• If no sub-menu is opened, hovering the menu bar will give some outset item effect.
• If a sub-menu is opened, hovering the menu bar will give some push-down and inset item effect.

In Menu G5, the pad width of a menu bar will be decided by the total width of the menu items, so there is no way in Menu G5 to make a menu bar with some given width while each of the menu items are using actual width.

To workaroud it, we make the menu holder somewhat like the pad for the menu bar:

and for the " " inside the menu holder we use some CSS to adjust the height of it so that it would be a bit higher than the menu items and thus gives some padding effect.

For the bold font items in sub-menus, we assign a group id to them in the menu content and apply the bold font effect with item-level styling.

[Back to index page]

# # #