Pure CSS mega menu with a professional look

admin · CSS, Featured Articles · 20 Comments

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.

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

&lt;style type=&quot;text/css&quot;&gt;
#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;
}

#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;

}

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:

#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: &quot;progid:DXImageTransform.Microsoft.gradient(startColorstr=#EEEEEEEEE, endColorstr=#BBBBBBBB, GradientType=0)&quot;;

-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: &quot;progid:DXImageTransform.Microsoft.gradient(startColorstr=#EEEEEEEEE, endColorstr=#BBBBBBBB, GradientType=0)&quot;;
}
#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;
}

#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;

}

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

Notice the attribute below

left: -990em;

1	left: -990em;

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.

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: &quot;progid:DXImageTransform.Microsoft.gradient(startColorstr=#EEEEEEEEE, endColorstr=#BBBBBBBB, GradientType=0)&quot;;

-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)";

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

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.

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

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

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.

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

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

IE6

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

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

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

IE7-8

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

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

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

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.

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

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

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]

About the author

admin

Chris Leonard started out developing web sites in early 1995 with 2 college friends. Since then he has worked with such clients as Hewlett Packard, DELL, Century 21, RE-MAX, the Monterey Bay Aquarium and many more. His skillset has grown from editing basic html 1.0 in Hot Metal and Homesite to include xhtml, css, AJAX, php, javascript, jQuery and MySQL. Chris also has extensive knowledge of GUI, UX and information architecture in developing business systems for the University of Delaware since 2003. He has also been sole proprietor of AtSea Design web design and marketing strategies since 1999. Chris spent 18 years working in Silicon Valley with some of the earliest and most talented pioneers in web site architecture including a marketing campaign for an observation satellite launch for the U.S. Government and a Webby Award winning team in 2000 for the Monterey Bay Aquarium website. He now resides with his wife and 2 sons in Delaware while working as a web developer at the University of Delaware and tries to play his geetar when he can. You can hear some of his music at SoundClick

Comments
Trackbacks

20 Comments

benny

04.12.2011

Great Post! I can’t wait to try this!!
Dave

04.21.2011

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

04.21.2011

Send me a link to your page and I’ll see if I can help
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.
Khurram Ishaque Memon

05.26.2011

Awesome work! How about if we want to delay the time and slide the menu vertically? Is it workable here?
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.
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.
Conseil en organisation

08.02.2011

Outstanding post. Thank you very much. We’ll try using megamenu on our website.
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.
Bent

08.16.2011

This is great. Thank you. If you do webdesign, knowing Jacob Nielsen and his usability is a must
Web design

09.18.2011

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

10.26.2011

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

11.14.2011

@Robert Take a look at Andy’s site. http://www.comluv.com
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.
Prodyot

02.28.2012

Wonderful.
The fact that it is in pure CSS makes it cross browser.
Thanks for sharing.
By the way, you have awesome experiences.
Hats off.
admin

03.08.2012

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

03.29.2012

Great post. Thank you for sharing. I have been looking for this type of great navigation.
www.shakuki.com

04.13.2012

Wow.. this is great tutorial, only use pure css without javascripts
adivol

05.10.2012

Thanks for sharing this; I personally used your code of css menu style.
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.