CSS Mega Menu

Pure CSS mega menu with a professional look

NOTE: I notice a lot of folks have viewed this post but no one has left any feedback. Providing feedback helps me post content that will be most useful for you. Good or bad, leave me a message. I’d greatly appreciate it. :P

I’ve been researching lately (ok, a couple of years) and I wanted to share some info I found from Jacob Nielsen’s site regarding the use of mega menus for navigation on your web site. An interesting read Mega Drop-Down Navigation Menus Work Well.

If you don’t know by now Jacob is well respected in the web world. He does extensive studies on the way users interact and surf the internet.

You can read the full article for more in depth reading. Here however I want to quote some of the content (text inside blockquotes) on why using a mega menu on your site has it’s benefits with UX and SEO.

mega drop-downs have the following characteristics:
* Big, two-dimensional panels divided into groups of navigation options
* Navigation choices structured through layout, typography, and (sometimes) icons
* Everything visible at once — no scrolling
* Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs.

He goes into further detail on 5 fact based points on why navigation is already heading in this direction.

Mega menus everywhere. So where do I start?

I’ve found a few good samples in use out there but none of them seemed easy to configure let alone scale effectively. So I decided to see if I could put together a mega menu that was easy to understand, cross browser compatible and platform as well. I put this together and will explain the code and CSS behind the magic.

There are 3 sections of CSS styles to control the layout and the menu functionality. The first section below is for the menu itself.

Menu styles

[css]
<style type="text/css">
#mega {
list-style:none;
font-weight:bold;
height:30px;
margin:60px -1px 0 0;
}
#mega li {

background:#007AC0;
color:#FFF;
border:1px solid #CCC;
margin-left:-1px;
float:left;
width:150px;
text-align:center;
position:relative;
}

#mega li:hover {
background:#EEEEEE;
color:#007AC0;
border: 1px solid #777;
border-bottom:0;
padding:7px 0 1px;
margin-top:-7px
}

#mega li:hover a {color: #007AC0}
#mega li a {
color:#FFF;
outline:0;
text-decoration:none;
display:block;
line-height:30px;
}

#mega li:hover div, #mega li.right_one:hover div {
left:-1px;top:auto;
}

#mega li.right:hover div {
left:-221px
}

#mega li.right_none:hover {
background:#EEE;
color:#007AC0;
border: 1px solid #777;
padding:7px 0 1px 0;
margin-top:-7px;
}
[/css]

Nothing out of the ordinary. We’re styling 6 navigation items in a container of 905px width. You can adjust items easily to use other widths.

Notice the position:relative on the #mega li css. This is important as it keeps your submenus in place when they appear.

Sub menu CSS styles

Now come the styles for the submenus. This is where you can get fancy. Think about your target audience and what information you want to convey to them. It’s important to relay the proper information as stated by Jacob Nielsen above.

I created sample menus that show various layout techniques. The container div styling is the same for all menus. Here it is:

[css]
#cont1, #cont2, #cont3, #cont4 {
position:absolute;
left:-999em;
margin-top:1px;
width:350px;
padding:0 10px 10px;
border:1px solid #777;
border-top:none;

background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#EEEEEEEEE, endColorStr=#BBBBBBBB, GradientType=0);

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EEEEEEEEE, endColorstr=#BBBBBBBB, GradientType=0)";

-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

#cont5 {
position:absolute;
left:-999em;
margin-top:1px;
width:130px;
padding:0 10px 10px;
border:1px solid #777;
border-top:none;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#EEEEEEEEE, endColorStr=#BBBBBBBB, GradientType=0);

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EEEEEEEEE, endColorstr=#BBBBBBBB, GradientType=0)";
}
#mega li:hover div, #mega li.right_one:hover div {
left:-1px;top:auto
}
#mega li.right:hover div {
left:-221px
}

#mega li.right_none:hover {
background:#EEE;
color:#007AC0;
border: 1px solid #777;
padding:7px 0 1px 0;
margin-top:-7px;
}
[/css]

I’ll explain what the attributes mean and what you can edit to your color scheme and audience.

Notice the attribute below

[css light="true"]
left: -990em;
[/css]

This is very important for not only SEO but also to comply with the 508 Accessibility standard. What this is telling the browser is to load and display the submenus off the screen. That way the content is loaded, the data inside those menus is also counted on for positive SEO points. But the big win is the ability for screen readers to ‘hear’ the content. I can’t tell you how many designers can overlook this. Making sure your code is w3C and 508 compliant is very important.

CSS3 here we come

I’m sure most of you have heard about CSS3 and what it can do. There are many new and exciting techniques you can use, along with HTML5 to create cool new effects for your web page. Be aware though that not all browsers (mainly Internet Explorer) support CSS3.

The code we used here has been tested on all Mozilla, Webkit (Safari) and IE6-8 browsers. IE9 should be able to handle these features but I’m not about to download a Beta version of anything Microsoft. :) I’m not going into full detail on what exactly the code is doing but for general purposes you’ll get an idea of what’s going on.

Creating gradients

There are 2 things going on in the code below. Creating gradients for different browsers and adding rounded corners.

[css]
background:#F4F4F4;background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#EEEEEEEEE, endColorStr=#BBBBBBBB, GradientType=0);

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EEEEEEEEE, endColorstr=#BBBBBBBB, GradientType=0)";

-moz-border-radius: 0 0 5px 5px;-webkit-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;
[/css]

Mozilla based browsers

The first line is for Mozilla based browsers. (Firefox) The code is telling the browser to apply a vertical gradient starting from the top for the submenus.

[css light="true"]
background:#F4F4F4;background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
[/css]
 

Safari

The first line is for Webkit based browsers. (Safari) The code is telling the browser to apply a vertical gradient starting from the top for the submenus. Starting color are the E’s and ending color are the B’s.

[css]
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
[/css]
 

IE6

For those of you still supporting IE6, there are ways around gradients as well although controlling horizontal and vertical is not available.

[css light="true"]
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#EEEEEEEEE, endColorStr=#BBBBBBBB, GradientType=0);
[/css]
 

IE7-8

The code below is to control IE7-8. Again controlling horizontal and vertical is not available.

[css]
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EEEEEEEEE, endColorstr=#BBBBBBBB, GradientType=0)";
[/css]

It is a very good idea to check these IE versions when IE9 is available to make sure you have no surprises. :)

Apply rounded corners

With CSS3 there is no need for using javascript for rounded corners (sigh, except for IE). Regarding IE I generally let the browser square off the corners and leave it at that. I’d rather do that then load unnecessary scripts.

Here’s the code to round corners via CSS3.

[css]
-moz-border-radius: 0 0 5px 5px;-webkit-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;
[/css]

The code works similar to the shortcut for borders and margin. Starting from the first number:
border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

[button type=tick color=white size=normal]Demo[/button]

13 Comments

  1. Dave

    04.21.2011

    I’m having trouble getting a 3rd level list/dropdown to work. Any advice?

  2. admin

    04.21.2011

    Send me a link to your page and I’ll see if I can help

  3. JR

    05.12.2011

    I’ve been looking and looking for a menu like this that is keyboard accessible. There seem to be many versions of vertical dropdown menus, many without using javascript, but no mega-menus. Thanks, I’ll keep looking.

  4. admin

    05.27.2011

    @khurram it probably can be done but you would have to use jQuery or another javascript technique to use the delay and slide. AFAIK CSS doesn’t have this functionality. EDIT: Although the CSS3 transition technique is a possibility. If you come up with something with pure CSS let me know and I’ll update the post.

  5. Andy

    07.26.2011

    Thanks for a great article but without the ability to control with the keyboard I doubt Jacob Nielsen would endorse it – any ideas on how this can be done would be very welcome. Pant’s link is no better in this respect.

  6. admin

    08.15.2011

    @Andy Actually Andy Jacob is the reason I went this route in the first place. I just recently ran the code through the WCAG 2.0 Level A test and there were a couple of errors (which I fixed, but not in this post.). Seems the biggest being the use of grouping links so that disabled folks have the option to skip navigation altogether.

    Honestly I haven’t followed up any more than that with this except for the testing mentioned here. Using tabindex would be problematic for multiple reasons. I’m open to feedback from other folks if they have an answer to Andy’s question.

  7. Web design

    09.18.2011

    Very usefull code. I`ve addet to my snippets library.

  8. Robert Labbe

    10.26.2011

    Is there a website of this in use or a demo I can view?

  9. admin

    11.14.2011

    @Robert Take a look at Andy’s site. http://www.comluv.com

  10. Kate

    01.01.2012

    Great menu and I’ve seen tons of menus. I really don’t understand those who continue to use IE as their default browser when other browsers are superior.

    Thanks for the detailed tutorial.

  11. admin

    03.08.2012

    Thanks man. Lots of good times… probably why I have no hair left. LOL

  12. adivol

    05.10.2012

    Thanks for sharing this; I personally used your code of css menu style.

  13. Bob

    05.16.2012

    Thanks for the post. I have been truggling with coming up with a usable navigation (im a newbie in the world of html and css:-)), but this article help me a great deal.

Leave a Reply






You must add your URL for KeywordLuv & CommentLuv to function.



CommentLuv badge

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.