Vertical Nekkidblogger menu - Ultra-efficient CSS flyout menu

Introduction

The vertical flyout menu uses the ultra efficient Nekkidblogger menu framework, the same as I used for the horizontal CSS drop menu. It uses an accessible, standard UL (unordered list) classed with classes for the levels of the menu. The HTML is the same as shown in the post about the Nekkidblogger menu.

The Nekkidblogger horizontal dropdown menu runs on five structural CSS rules, and is light, simple and very fast:

#nekkidblogger li { list-style:none; position:relative; float:left;
    text-align:center; margin-right:5px; font: 10px verdana, 
    sans-serif; } (Rule 1)

.level2 { position:absolute; top:30px; left:0;  }  (Rule 2)

.level3,.level4 { position:absolute; top:0; left:8em; } (Rule 3)

.level2,.level3,.level4 {visibility:hidden} (Rule 4)

#nekkidblogger :hover > ul { visibility:visible; }(Rule 5)

As simple as they are, these rules can be simplied even further in a vertical flyout menu, where all the levels are vertical.

Modifications

In the previous post I discussed in detail how to style a Nekkidblogger menu. So I skip that here. I focus instead on the modifications of the structural rules to turn the menu into a vertical CSS flyout menu.

#nekkidblogger li { list-style: none; position: relative; width: 8em;
   vertical-align: bottom; font: 10px verdana, sans-serif; } (Rule 1) 

Here "list-style" and"position" are necessary. "float:left" has been removed from the rule. Now we also need to give the LI a width (otherwise scrolling will become difficult - each LI will extend to the right all the way to the border of its parent). In addition, I have also added "vertical-align:bottom". This is a fix for an obscure bug in IE 7 which can result in a vertical gap between the LI-boxes. The fix does not seem to affect other browsers. The rest of the rule is presentational.

Rule 2, Rule 3 and Rule 4 can be greatly simplified for a vertical menu, as all levels now fly out in the same direction. We can actually position and hide all the levels in the same rule (provided they have not been styled with a width that differs from that of the top level, in which case the positioning of the flyouts would be affected and in need of adjustment), and reduce the three rules to one:

.level2,.level3,.level4 { position: absolute; top: 0; left: 8.1em;
    visibility:hidden; }  (Rule 2A)

And that is it. There is no need to modify Rule 5. So here it is:

Final remarks

The fixes for IE6 are exactly the same as for the horizontal version of this menu. You can find them in my previous post, under the heading "Fixes for IE6" towards the bottom.

So, that's it. 3 "structual" CSS-rules for a multi-level menu vertical flyout CSS menu. It can't be done with any fewer than that. The rules are also simple, mostly very short, and computationally effective (good for fast page loading) with minimum use of descendant selectors. Fast, easy, user-fiendly and good for SEO (as it is a pure CSS menu based on an unordered list).

If you want, you can even have a look at how the Nekkidblogger vertical flyout menu looks with only those three structural rules - in this demo is the vertical barebones version in its glory! This, in a sense, is the proof of the concept.

PS: Stay tuned for more postings on the Nekkidblogger menu. I will show more extensions of this efficient framework.

Copyright

I spend lots of time on development and posting. Therefore I kindly ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet. A donation to Nekkidblogger is requested.

2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - peter{at}nekkidblogger.com. A donation to support 'Nekkidblogger' is required. USD 25 per client seems a fair suggestion.

3. If you are having problems integrating it into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Terms and Conditions

This menu can be used subject to the following terms and conditions:

• 1.If you wish to use this menu in your website(s) you can do so.
• 2.You may NOT place this menu on another site for others to download.
• 3.You may NOT redistrubute or resell this menu.
• 4.Users agree not to remove or edit the credit notice within the stylesheet, or claim that this menu is their own.

Files

Pay me $ 10 with Paypal and send me a mail about it, and I will send you the HTML, CSS, and JS in a zipped file. Send $100 and I'll give you 1 hour of support by email as well.