We received a lot of great feedback for our CSS-based dropdown menu, so I thought it would be time for another little tutorial. This time showing how to create a nice-looking tab-menu, based purely on HTML and CSS.
See a live tabmenu example here.
First, we want to have the menu code created in HTML. I find that the most appropriate way of doing this, is by creating the menu as a list. Thereby non-supporting browsers will still show the menu as a list, which somewhat resembles a menu. Everyone else will see the cool tab-menu :-)
<ul class="tabmenu"> <li><a href="">Overview</a></li> <li class="active"><a href="">About</a></li> <li><a href="">Products</a></li> <li><a href="">Contact</a></li> <li><a href="">Login</a></li> </ul>
So far this is somewhat similar to the dropdown menu, except we don’t have sub-items. This tab-menu and the dropdown could actually be combined by the clever developer ;-)
Next, we create the CSS for the menu, which will turn the simple list into something nicer.
.tabmenu { font-family: Arial, Verdana; font-size: 1em; height: 32px; border-bottom: 1px solid #333333; margin-bottom: 20px; padding-left: 15px; } .tabmenu li { list-style-type: none; list-style-position: inside; float: left; margin: 0; padding: 0; font-size: 16px; } .tabmenu li.title { padding: 6px 20px 0 0; } .tabmenu a { display: block; height: 25px; padding: 6px 15px 0 15px; color: #009900; text-decoration: none; } .tabmenu a:hover { color: #990000; text-decoration: underline; } .tabmenu li.active a { text-decoration: none; background-image: none; border: 1px solid #333333; border-bottom-color: #ffffff; color: #333333; }
That’s it. Enjoy! Please feel free to submit any feedback how to extend or improve this snippet.
3 comments (leave a comment)
sweet
by matt on November 17, 2010 at 19:01
Maybe it’s because I’m still on IE 7, but the example doesn’t look anything like the image on this page.
Reply by Jakob on January 30, 2011 at 19:23
The example is more a proof-of-concept, and uses standard HTML and CSS. For browser optimization you might need to tweak the example, to fit browsers that don’t support all standard code.
by Sean on January 27, 2011 at 00:26