Last week, in response to a post about creating arrow-like menus, Dragon Cotterill linked to a tutorial called How to Build a Kick-Butt CSS3 Mega Drop-Down Menu. Earlier in the week I'd seen elsewhere a "top 50" list of cool-looking "mega menus" and wondered then where I could use one of them. Dragon's link made the urge stronger and, in the end, I found a perfect use for them.

What's a Mega Menu?

We're all used to the idea of drop-down menus by now -- you see them everywhere. You hover over a menu item and up pops a list of other related items. In terms of HTML this is just a set of nested <ul> elements. Any <ul> element that is a child of an <li> is hidden until the mouse hovers over the parent <li> element and then CSS is used to display the child <ul> until the mouse cursor leaves and then it's hidden again.

As I see it Mega Menus are just a logical progression of this. Instead of hiding and showing a UL element we just stick a DIV in there. In that DIV we can place whatever HTML we like. Here's an example, taken from the above tutorial:

Pretty damn cool aren't they!?

Now, that said, I don't really see Mega Menus as being much to do with CSS3 at all. Unless the :hover pseudo-class only came about as part of the CSS3 spec, which I'm pretty sure it didn't. I just think the author of the linked tutorial and many others are guilty of using the CSS3 tag to make things seem cool and more relevant. Just like people over-used the term "Web 2".

You can in fact start using Mega Menus today without needing to worry too much about support among current browsers for CSS3.

A Practical Example

Recently I've been working on merging the websites for three self-catering properties - Hurdlow Grange, Crewe & Harpur Arms and Lapwing Barns. Owned by the same people, each had their own website, which made no mention of the other two properties.

The aim of merging the three was to cross-sell them from each of the other sites. To do this I came up with the idea of each property being a tab, like so:

By clicking on the middle tab for the Crewe & Harpur you'd then go to that site. The middle tab would shift to the left (to assume the expected position of the main site logo) and the other two tabs would now become less prominent.

What worried me about this approach was that it broke the user's understanding of how a tab should work. If you press a tab it should stay where it is and becomes selected. Not jump to the left.

To try and get round this and to try and explain the tab in the first place I added a mega menu that goes some way to addressing these issues, like so:

Not exactly a "mega" menu, but the principle's the same - it doesn't have to be a simple list nested in your menu!

Adding A Little CSS3

The screengrab above is taken in IE8. All works fine, but the CSS3 support is lacking. Compare it to the grab below, which was taken in Chrome:

Nice, no? Rounded corners. Background gradient fills. Drop shadows. And not a single graphic needed. The only difference between the two is about 6 lines of CSS.

So, there you go. You can make practical use of mega menus right now. You can also use a little CSS3 to add a that something special. Just as long as you check how it looks in non-CSS3 capable browsers too.