CSS3 Dropdown with Fade
For your convenience, I've included two options. There's one with some style and one that's mostly without style. These are contained in the
plain folders, respectively.
The source is available in both LESS and CSS.
Note: Though this menu can be made to work with IE7+, the above examples will only display properly in IE9+. Read below for more.
fade-menu class on an unordered list element.
The headers of the menu are the immediate children
li of the menu.
<ul class='fade-menu'> <li>Here's a header</li> <li>And one more header</li> </ul>
To make a sub menu that fades in, add a
ul child to the menu headers.
<ul class='fade-menu'> <li> Header text <ul> <li>First sub menu item</li> <li>Second sub menu item</li> </ul> </li> </ul>
And that should do it.
fade-menu list has 0 height because its children are set to
float: left;. This project doesn't have a clearfix solution included with it, so be sure to clearfix the menu or otherwise explicitly set the height on a parent element.
As you'd expect, you'll find no issues with this menu in the latest version of all of the major browsers. It was also optimized for use on iOS and the most popular Android phones (it probably works fine on other Android phones – I just didn't check!).
Legacy IE support isn't so bad, either. For < IE9, you'll need to begin by installing the html5 shim to get these early browsers to recognize the
nav element, or otherwise swap it for something like a
Once you've done either of those, the menu will still function as far back as IE7. It just won't display as nicely as it does in modern browsers. This is because CSS transitions are only supported in IE10+. In any earlier IE the menu will simply 'pop' into existence.
Versions 1.x of this menu used a unicode character for the triangle that sits atop the dropdown items. I added this due to a bug in Firefox, but the bug has since been fixed. Accordingly, I've switched over to using CSS borders for the triangles. This has the effect of making the menu look nicer in IE8. Great!
grunt: Build and lint both the plain and styled menu
grunt plain: Build and lint the plain menu
grunt styled: Build and lint the styled menu
Note: I've turned off the
box-model rule for linting on the styled source. This is because I've accounted for what it warns against in my code.