Creating the Vertical Flyright Menu

Adding the vertical menu to the page

In the basic page remove the place-holder paragraph containing "<p>Vertical Menu Bar</p>" and replace it with the test menu. The basic menu structure is unchanged from that of the horizontal menus and can be reviewed here. The only difference at this stage is that the id selector assigned to its <div> is navVd. See the results here: example page. Ya, that's just as ugly as the horizontal menu was at this stage.

Floating the top level menu & hiding submenus

The top-level menu items should be stacked on top of each other on the left side of the page, with all submenus hidden. To accomplish that, create the class ".navV" within the "#navVd" <div> definitions, and add the following style rules to the document header:

The first rule removes the bullets and indents that are the default for <ul> elements, and floats the navigation bar and submenus to the left.

The second and third rules are only cosmetic, adding some padding to the navigation bar and a background color of aqua to the submenus. Both are added simply to help visualize important aspects of the page behavior.

The fourth rule displays the <a> elements without text wrapping, keeping each on a single line.

The fifth rule positions the <li> elements so they line up on top of each other with varying widths.

The sixth and last rule dictates the behavior of the submenus:

• use absolute positioning for submenus, taking them out of the normal flow of the document, which will be necessary later when they are displayed,
• automatically adjust the width of the submenu,
• hide the submenu,
• align the top of the submenu's <ul> block with the top of its parent menu item, and
• position its left side to the right by the width of the parent.

See the results here: example page.

Clearing floats

At this point there are a number of problems with this page, some merely stylistic, and some critical. Take a look at the two screen captures below.

The purple box on the left is the navVd <div>, while the aqua box is the main menu <ul>.

Grab the window border, make the window narrow enough and everything after the navVd <div> wraps around the <div>. Make the window wide enough and everything appears to float to the right; it isn't really a float, but just part of the wrap behavior.

The footer should probably not wrap. After all, it is a footer, so it should extend across the full width of the page, and always be at the bottom of the page. This is easily fixed by:

1. adding clearfix to the containerL <div> so the tag reads <div id="containerL" class="clearfix">, or
2. clearing floats in the footer.

Either method works, and only one is required, but here the second is employ by inserting the following rule:

Menu collisions

Look at the screen capture below, and pay particular attention to the red, rounded rectangle.

When hovering on horizontal menu "Item 2", the main items of the vertical menu bleed through the horizontal submenu. And in fact, if the hover is moved down the horizontal submenu, the submenu disappears when the cursor leaves the <a> element of horizontal "Item 2.2".

This is a z-index problem that can easily be cleared up by adding a high z-index value to the horizontal menu with the following rule:

See the results here: example page.

Continuous vertical bar

Notice that, when the window is made narrow enough, the content <div> still wraps around and below the vertical menu bar. If a continuous menu bar without the "wrap" behavior is desired, meaning a vertical menu that extends from the horizontal menu above to the footer below, regardless of the height of the page and its content, then the width of the vertical menu bar must be hard coded. Some experimentation is required to find the right width, but for this example, 140 pixels works well. Then the left margin of the content <div> must be set to that width, plus the total of the left and right margins, padding and border of the vertical menu bar. To accomplish this the following styles were added:

Note that this is purely a stylistic choice: the menus will function with or without this change. Also note that if the width of the menu items change, either because of a change in the text length, font size, margins, padding or borders of the menu items, then the above rules must be adjusted accordingly.

See the result here: example page.

Notice that, when the page is tall enough, it is not the menu bar that extends down to the footer. Rather, the left 160 pixels of the containerL <div> is exposed beneath the menu. To give the appearance of a continuous bar all the way to the footer, merely make sure that the containerL <div> and the navVd <div> have the same background.

Displaying submenus

The vertical menu uses the same hover rules to display and hide submenus, but they're applied as rules to the #navVd.navV selector. Return to the second horizontal menu tutorial for details on how the hover rules are applied.

See the result here: example page.

Aligning the submenus

Just as with the horizontal menus, the flyright submenus are offset vertically from the parent <li> element by by the parent <li>'s top border. But since no top border has been used here, no correction is required. In any case, some experimentation is always necessary.

Next

At this stage, the multi-level flyright vertical CSS menu bar is complete and fully functional for all the supported browsers. And it offers the advantage that all submenus automatically adjust width to accommodate the content of the widest contained item. To see this in action, go to the example page and navigate to Item 3.2.3.

However, just as with the horizontal menus, IE 6 & 7 exhibit some very non-compliant behavior and a few nasty surprises. Go to the next tutorial to see how to correct for them.

Vertical:  V-1  [V-2]  V-3  V-4  V-5  next