HTML and CSS

Pure CSS mega menu with a professional look

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 pre and CSS behind the magic.

For those in a hurry, you can view the demo athttp://www.atseadesign.com/demos/mega.html.

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

#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:#EEE;
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: “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;

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 pre 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 pre 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 pre 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 pre 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: “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 pre 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);

Safari

The first line is for Webkit based browsers. (Safari) The pre is telling the browser to apply a vertical gradient starting from the top for the submenus.

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

IE7-8

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

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

 

The pre 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

About the Author

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 website design and marketing strategies since 1999. Chris spent 18 years working in Silicon Valley with some of the early 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.

 

CssTabDesigner2.0.wmv