CSSPLAY

CSS MENUS › Pull Down Multi level Menu

Date : 2nd January 2011

For all modern browsers

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

Click the tab at the top center of the browser for pull down menu demonstration.

Information

A little different from my other menus, this one is hidden from view until you need it. Just click the 'Pull Down Menu' tab at the top center of the browser window to pull down the droplist menu. The menu will stay open until another link is clicked or you click the 'Close Menu' tab.

This is a CSS answer to the normal jQuery/javascript pull-down menu panels that you see on many websites. Well it is for all but IE6, IE7 and IE8 which require a small javascript routine to emulate the :target pseudo-class which is not supported in these browsers.

I have also added CSS3 enhancements for those browsers that support corner radii, drop shadows and transitions, Opera, Safari, Chrome and Firefox 4 beta (at the moment).

IE6 does not support position:fixed so in this browser the menu is positoned at the top of the page, but in all other browsers it sticks to the top of the browser window as the page is scrolled so that it is always available for navigation.

This also has the navigation code placed at the bottom on the source code and as such is SEO friendly.

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.