Description

Free CSS Drop-Down Menu Framework was first released back in June, 2008. Since then it has struck the audiences with its perfect cross browser performance and wide variety of drop-down menu transformations and themes. As the internet changes this project remains a steady advocate of purely CSS driven solutions.

  • Modular, with themes. Not only HTML is separated from CSS, but even CSS definitions are categorized into structural and thematic types. Thus creating a new css drop-down menu means creating only a new theme since structure is permanent.
  • Easily deployable. The code and files are well organized. Available channels to hook up to your CMS or other tools as well as existing websites in XHTML or HTML5 format.
  • Easily transformable. Can be transformed by changing class name only. Available transformations: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.
  • Cross browser. Configurations available for Windows Internet Explorer 7 or later, Mozilla Firefox 1.5 or later, Opera 7 or later, Apple Safari 2 or later, Google Chrome, etc.
  • Super Fast. Having the above mentioned features it is not affected by any disturbances whatsoever.
  • Continuous development. The project is constantly revised and improved.
  • No JavaScript whatsoever!

Frequently Asked Questions

Q.Why are you using CSS property visibility and not display in order to reveal and hide drop-down menus?
A.

In my tests some versions of IE7 did not handle display property correctly. It would still show some parts of the drop-down menu even if it was closed at that moment. I realize that some users might want to utilize display to dynamically manipulate drop-down menus. In that case please use the following override code snippet in your theme:

ul.dropdown ul { display: none; visibility: visible; }
ul.dropdown li:hover > ul { display: block; }

Now you will be able to manipulate your drop-downs with JavaScript (use animations, etc.). I will further investigate this issue and move this code to the base file as soon as I feel comfortable with the situation.

Q.How do I center the menu horizontally?
A.

There is no reliable cross browser solution to center those floating menu items. I do have one possible solution with a couple of drawbacks - on IE7 it will disable horizontal scrollbar and on other browsers it will hide content overflow outside the page's wrapper or container, if you will.

Please refer to the two available demo templates illustrating horizontal menu centering - MTV.com and Adobe themes. It's a nice solution nevertheless.

Q.I have a flash object below my drop-down menu and those drop-downs appear behind the flash. Why?
A.

You must use wmode attribute within your object and embed tags of your flash element. The value of this property should be set to transparent. Adobe's reference guide states that with wmode set to transparent you can expect HTML elements overlap SWF content. In some cases value opaque will work too. Please visit Abobe's Flash documentation for more details.

Q.Can I contact you to help me with menu installation?
A.Yes, please donate an amount of your choice by clicking on the 'Donate' button, which sits under the 'Download & Support' section. Paypal will reveal to you my email address. Once the donation is complete, use that email to contact me with your request.
Q.Does this menu work on iPhone OS or other mobile OS with no mouseover event?
A.Yes, it does work on such OSes. In the advanced or ultimate versions of the menu the point is to leverage a hyperlink trigger inside a li item to make it open its child menu. In simple version you will need to use a workaround and add onmouseover="" to each li item containing a drop down menu in order to trigger and toggle its visibility.
Q.Do you have any documentation for this project?
A.I don't have any extensive documentation. I have seen articles covering integration into Wordpress, Blueprint usage, Typo3 Extension
Q. What is the difference between the simple and the advanced/ultimate (horizontal) menus?
A. The creative strategy for this framework was to split every theme into 3 segments - simple, advanced, and ultimate. Layer simple just kicks off the styling with basic functionality. It does not use hyperlinks as blocks, but rather keeps them as inline elements. On top of simple base advanced segments display hyperlinks as blocks and reconfigure other elements accordinglly. Finally, ultimate layer adds support for a single span elements nested inside a list item in order to manage complex themes requiring additional elements.
Q. How can I enable on or active state on a grid of menu items to mark the path to the opened page?
A. You can enable this state by adding an on class (class="on") to any li item that is active. This simple feature is demonstrated in some of the templates in the download package. If you want to customize styling for this state, you will have to do that in your own css stylesheet.

CSS Discussion Points

  • What I am trying to do is have the menu bar stretch the full width of my page, and have each top level menu section of equal width, with the text centered in each.

    by Adam

    • You could stretch the menu by setting its width to 100%. But that won't make the menu items automatically adapt to the full width. You would still need to calculate and assing a percentage width value to each top menu item.

      Some think that display: table might be a solution, but it doesn't work on IE7 and I think it's a controversial css property. In the near future CSS3 property box-flex will fully solve this issue.

  • One of the issues I've come across with this is that when a fly-out menu comes out close to the right hand side of the users browser, it is displayed outside where the user can see it and click it (creates a horizontal scrollbar). What would be better is if it were possible that the fly-out could be displayed on the left if there isnt any space on the right.

    by moncojhr

    • Obviously we cannot dynamically calculate spacing with CSS. This is something that you should project on your own. If you feel that your menu's item is too close to the right hand side of the browser window, apply rtl orientation to it, but including file dropdown.vertical.rtl.css and assigning class name dropdown-vertical-rtl to the li tag representating that menu item.

  • Is it possible to adjust the width of the pop-up menus to the width of the text?

    by Vlad

    • No, the width of the drop-down/pop-up menu is either 100% to match its parent's width or fixed width. There is no reliable cross-browser solution to make drop-down menu scale to text length. You can always test various fixed widths or css statement white-space: nowrap to disable text wrapping on your drop down menus.

  • I have problems with z-index issue...

    by Jose

    • There are two main things you need to remember about z-index. One, normally you give global z-index preferencies accross the whole document. Second, on older browsers, like IE7, global preferencies won't work in nested elements that have position property assigned to them. In latter cases, you need to manage preferencies on most abstract parent elements to make sure any children elements with z-index inside them work properly.

  • I'm having problems with the menu contents being displayed when the page is printed

    by Dennis

    • By default I have selected media type screen in the css file links. Therefore, in print preview mode you are going to see a standard classic outline of all drop down menu items since none of the drop down menu styles will be read. It is possible to use media type all and force visibility on all menu items, but this will cause some drop downs overlap others. It is recommended to apply an alternate styling for this mode.