One of the most common elements when talking about a website or an application design is definitely the menu navigation. No matter if vertical or horizontal, simple or complex, a menu is essential and it has to look that way.
In today’s article, you’ll learn how to create a good looking menu using some CSS3 magic.
The idea
If you are a web developer you may have heard of tools called CSS pre-processors. Less is probably the most well known CSS preprocessor, but that is another story.
While visiting LESS’s site, I noticed their download button, which is an image, and I thought to myself: I can do it using CSS only.
LESS download button – at this time
The HTML
<nav> <ul> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Categories</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Portfolio</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul> </nav>
Pretty clean, except for the span element. You’ll see further why we need that span.
The CSS
The demo example contains also a header and a logo (so, extra styles), but I’ll list here only the styles used for this menu.
Removing the default list styles
nav ul
{
padding: 0;
margin: 0;
list-style: none;
}
nav li
{
float: left;
}
Style the anchor
nav a
{
float: left;
color: #eee;
margin: 0 5px;
padding: 3px;
text-decoration: none;
border: 1px solid #831608;
font: bold 14px Arial, Helvetica;
background-color: #831608;
background-image: -moz-linear-gradient(#bb413b, #831608);
background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));
background-image: -webkit-linear-gradient(#bb413b, #831608);
background-image: -o-linear-gradient(#bb413b, #831608);
background-image: -ms-linear-gradient(#bb413b, #831608);
background-image: linear-gradient(#bb413b, #831608);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 -1px 0 rgba(0,0,0,.8);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
nav a:hover
{
background-color: #bb413b;
background-image: -moz-linear-gradient(#831608, #bb413b);
background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b));
background-image: -webkit-linear-gradient(#831608, #bb413b);
background-image: -o-linear-gradient(#831608, #bb413b);
background-image: -ms-linear-gradient(#831608, #bb413b);
background-image: linear-gradient(#831608, #bb413b);
}
nav a:active
{
background: #bb413b;
position: relative;
top: 2px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}
Multiple CSS3 properties were used to create the above.
Style the span element
nav span
{
border: 1px dashed #eba1a3;
display: inline-block;
padding: 4px 15px;
cursor: pointer;
background-color: #bb413b;
background-image: -moz-linear-gradient(#d4463c, #aa2618);
background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618));
background-image: -webkit-linear-gradient(#d4463c, #aa2618);
background-image: -o-linear-gradient(#d4463c, #aa2618);
background-image: -ms-linear-gradient(#d4463c, #aa2618);
background-image: linear-gradient(#d4463c, #aa2618);
}
nav a:hover span
{
background-color: #bb413b;
background-image: -moz-linear-gradient(#aa2618, #d4463c);
background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c));
background-image: -webkit-linear-gradient(#aa2618, #d4463c);
background-image: -o-linear-gradient(#aa2618, #d4463c);
background-image: -ms-linear-gradient(#aa2618, #d4463c);
background-image: linear-gradient(#aa2618, #d4463c);
}
Browser support
If above you have seen how the menu looks in modern browsers, here’s how the menu look in older browsers:
Fallback styles for older browsers
Advantages
-
Scalability
You can simply adjust its size by updating theanchor‘s font-size:font: bold 14px Arial, Helvetica;
- No images, so there are less HTTP image requests, also easy to maintain and update.
- You could easily transform this menu into a nice dropdown menu.
Conclusion
The menu we created using this tutorial isn’t a Sci-Fi one or a super mega complex one. The main purpose is to see how CSS3 can help us achieve interesting effects without needing images anymore.
I hope you enjoyed this tutorial, thanks for reading it!
Related content
Looks great and not too bad even in older browsers..
Paul, indeed, it looks well also in older browsers. That’s the graceful degradation concept.
It’s very sexy ! Good support for IE!
Thanks
My Collection.
Less is the second most well known CSS pre-processor, SASS being the first!
But seriously, well done.
Kurtis, thanks for your comment :)
Nice explanations, demos, and code display. Dig the use of text shadows and gradients.
Alex, nice to hear you liked this article. Thanks for your suggestion!
Instead of float left, you can use display inline in the li. That aside, great job with the inset shadows and gradients
Henrique, indeed, that’s also an option.
Thanks for your comment and I’m glad you found this article interesting!
First of all, great post!
Just wondering if it does make a difference, I mean even if we use image, the load time should not be that slow to be noticable in this day and age? Not trying to take away the merit of the article, css3 kicks ass!
Joe, thanks for your comment.
As you already know, absolutely every HTTP request matters when talking about speed as it ads milliseconds to a loading page.
Skipping the HTTP requests part, to create this menu with images you’d probably need to use Sliding doors technique. Also, for that you’d need extra time to build clever CSS sprites.
So, I think the CSS3 method is more suitable for this kind of menu.
Really sexy…too good….!!!
Nice work… I like the buttons, but can you tell me the code of the background of the demo, please?
Razvan, thanks.
Regarding “code of the background of the demo”: could you please be more specific?
cool and creative !!
Nice to hear you like it, thanks.
Very nice. To complete the look, just throw in a pure css arrow: http://lucianmarin.com/peculiar/
Mario, indeed, these are very nice icons that could improve any menu.
Wow, it’s gr8 to make buttons like this using CSS only.
Thanks!
Thanks for your comment Ashish, I’m glad you like it.
nice.. i use position absolute to make it fixed.. :) by the way. thanks bro
It’s nice to hear you like it! ;)
So sexy!. thx U.. I´ve been learning a lot from you recently. You have great tuts. thx again
Great menu. Great tutorial. Thank you very much. I love this blog.
@rick, @Otomobil: Nice to hear you like it and thank you for reading my articles!
hey red take a look to the bootstrap from twitter build with less
Good ! you really make a difference … keep it up
Thanks Teejay!
hi, i just try using this but is not working in IE 9, it works on firefox and chrome
hi, i just try using this but is not working in IE 9, it works on firefox and chrome, pls way forward..
Teejay, it works also on IE9.
If you use
navelement, don’t forget to add the HTML5 shim (view demo source).Thanks for your quick responds i really appreciate i didnt get that as i follow the demo carefully but still not work
sorry for that i got it after adding the Html 5 shim…. many Thanks
You’re welcome ;)
very nice article, i really like it the effort that you have put it in styling the css3 menus. Also check my blog
http://codeheaven.org/simple-css3-checkbox-and-radio-button.html
it’s so good !!!!..
Can I get the source code for the header as well please
Will, check the demo page source. You’ll find everything there!
Thanks
HI,
I AM WEBDESIGNER FROM VCARE CORPORATION .THIS MENU IS SO NICE IN ATTRACTIVE. I LIKE IT . BUT HE IS NO BROWSER SUPPORT. WHEN ALL BROWSER CSS3 SUPPORTED HE WILL USE ALL WEB DESIGNER & DEVELOPER
Forever sexy nav buttons.
Very cute.
Hats off to you for creating it in pure css3.
And, thanks for sharing.