CSSPLAY

CSS MENUS › Three up two down vertical flyout

Date : 21st August 2007

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

Information

Another flyout menu, but this time using background images to create the menu and sub-menu links.

Based on the Magic Menu #7 this menu uses the original conditional comments for IE5.5 and IE6 and validates as xhtml1.0 strict.

The menu is basically a vertical menu with up to five levels of flyout. Normally this would take up a lot of vertical space as each sub level menu drops down from the previous level, but with this menu alternate sub levels pull up instead. As can be seen if you follow the 'Contact' sub levels the first level pulls up then the next drops down followed by a pull up and so on, the outcome of which is that the menu unfolds horizontally instead of vertically.

This menu also has overlapping sub menus with transparent gaps between each level link, and to make it easier to navigate it also has a largish overrun area so that you can move your mouse off the list and the menu does not collapse.

Tested in IE6, IE7, Firefox, Netscape, Mozilla (no longer supported), Opera and Safari (PC).

By popular demand I have zipped up the basic menu with the stylesheet in the page head together with the transparent.gif used in the CSS. You will need to provide the background image as the one I use is copyrighted, and you will need a standards compliant doctype for it to work in IE7. Remember, if you use this menu then please keep the copyright information in the stylesheet.

Download the zip file three-up-two-down.zip

Copyright

Because of all the time and effort spent in producing this demonstration I would 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 support donation is now required for this demonstration.
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 - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations 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 demonstration can be used subject to the following terms and conditions.

1. If you wish to use this demonstration in your website(s) please email me stu{at}cssplay.co.uk seeking permission.
2. You may NOT place this demonstration on another site for others to download.
3. You may NOT redistrubute or resell this demonstration.
4. Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.
5. Please see the Copyright statement above regarding the requirement for a support donation.