Hey there, this is my first post on 2012 and today you’ll learn how to create a simple and clean CSS3 menu in just a few steps.
I know, there are so many CSS3 menu tutorials in the wild (including here on RTD) but I hope you will love this one also.
CSS3 menu tutorials
Below is a list with other CSS3 menu articles you may have read here:
- Sexy CSS3 menu
- CSS3 animated dropdown menu
- Cool CSS3 navigation menu
- Vertical dropdown menu with CSS3 and jQuery
The idea
The idea for this CSS3 navigation menu came to me while watching this button on UI Parade. Usually, when I see design stuff on the internet, I try to image how can I make it using CSS3. I think this a professional habit.
The HTML
Check the markup below, simple and effective:
<nav> <ul> <li><a href="">Home</a></li> <li><a href="">Categories</a></li> <li><a href="">About</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Contact</a></li> </ul> </nav>
Also, do not forget to include the following snippet when using HTML5 specific tags like nav:
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
The CSS
The following lines do not contain the vendor-specific properties like -moz- or -webkit-. From now on, I think this is how I’ll present the CSS in my articles. Just keep in mind that you can always find the full code in the demo page source.
Step 1
To be short: reset the margin and padding for the unordered list, also center align the inline-block list elements:
nav{
width: 960px;
margin: 80px auto;
text-align: center;
}
nav ul{
margin: 0;
padding: 0;
}
Step 2
For the menu elements, instead using float I chose the inline-block alternative. If you want to find out more about inline-block pros and cons, I’d recommend Robert Nyman’s article: CSS display: inline-block: why it rocks, and why it sucks.
nav li{
margin: 0 10px; /* Add some horizontal spacing */
display: inline-block;
*display: inline; /* IE7 and below */
zoom: 1;
}
Step 3
Using cool CSS3 properties like gradients and shadows we’re going to style the anchor elements:
nav a{
display: inline-block;
position: relative;
padding: 8px 15px;
border: 2px solid #fff;
text-decoration: none;
color: #999;
font: bold 14px 'Lucida sans', Arial, Helvetica;
background-color: #eaeaea;
background-image: linear-gradient(top, #eaeaea, #fff);
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
0 0 1px 0 rgba(0, 0, 0, .2),
0 2px 2px rgba(0, 0, 0, .3),
0 10px 10px -5px rgba(0, 0, 0, .2);
}
nav a:hover{
background-color: #eee;
background-image: linear-gradient(top, #eee, #fff);
}
nav a:active{
top: 1px; /* Simulate the push button effect */
background: #f5f5f5;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset,
0 0 1px 0px rgba(0, 0, 0, .2),
0 1px 2px rgba(0, 0, 0, .3);
}
Step 4
The below is the most interesting part, in my opinion. Without, adding any extra markup and using a pseudo-element you will be able to create a cool effect:
nav a::before{
content: '';
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
z-index: -1;
background-color: #e3e3e3;
background-image: linear-gradient(top, #e3e3e3, #f7f7f7);
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;
}
nav a:active::before{
top: -11px; /* Hey you, don't move! */
}
That’s it!
I hope you enjoyed this article and I’m looking forward to hear your thoughts about it. Thanks for reading!
Related content
Thank you Catalin :) ..
Hey, thank you also for commenting ;)
Thanks for the inline-block article! i am the one who use floats for everything. Good luck.
Juani, sometimes using
inline-blockis a very good alternative tofloat. Thanks for your comment!Very nice tut as always, the effect on active state is pretty realistic !
Only one thing bothers me : the hover effect is so discret that I thought there was none when I tried the demo and asked myself if buttons were clickable. Then I saw the code, and saw there was one. Maybe it depends on screen lightening
Stéphanie, thanks for stopping by and I’m glad you like my articles.
You may be right regarding the
:hovereffect. It’s kinda light, but that can be adjusted to be more visible.Hi! Thanks for your website! I love this nav ^^
Nice to hear that, thanks!
Pretty sexy menu. Well done!
Thanks Tieson, glad you like it!
I like this idea “..I try to image how can I make it using CSS3. I think this a professional habit.” i think i might steal this one :), on the other hand i recently came into your web site i found it very useful how ever i should suggest you do a little bit more documentation on the code and before you start introducing it, like let’s say in this part we will be covering the hover state on wich we be applying this this an that effects.
Cheers!
Hey David, I’m happy to hear you found my articles useful. Thanks also for your suggestion, I’ll keep that in mind.
hey red it’s great for the start of 2012. keep posting……. :P
Thanks for your comment Shreyas, I’ll do my best! ;)
Well maybe i see this one as very useful and very much thankful for sharing this stuff. It’s really a good idea.
Looks very nice!
Hey Dimox, I’m glad you like it!
Very nicely done, cheers :)
Thanks for your comment Stoo!
Awesome! Thanks for sharing. Great blog. I’ve added it to my Pinboard. :D
I love this and previous menus you shared. How you develop these menus. I am very crazy to know!!
Menu design is very good if you have any tricks to learn more css in detail then I wants because I develop a website as my study level. I also want to know about latest editor of CSS to make things batter. Different from all.