Sexy CSS3 menu

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.

Sexy CSS3 menu

View demo

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 button

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.

Initial menu rendering

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;
}
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: linear-gradient(#bb413b, #831608);
border-radius: 5px;
text-shadow: 0 -1px 0 rgba(0,0,0,.8);
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: linear-gradient(#831608, #bb413b);
}

nav a:active {
background: #bb413b;
position: relative;
top: 2px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}

CSS3 menu links Multiple CSS3 properties were used to create the above.

Style the inner span element

nav span {
border: 1px dashed #eba1a3;
display: inline-block;
padding: 4px 15px;
cursor: pointer;
background-color: #bb413b;
background-image: linear-gradient(#d4463c, #aa2618);
}

nav a:hover span {
background-color: #bb413b;
background-image: linear-gradient(#aa2618, #d4463c);
}

Style the inner span element

Browser support

If above you have seen how the menu looks in modern browsers, here’s how the menu look in older browsers:

Menu fallback Fallback styles for older browsers

Advantages

  • Scalability
    You can simply adjust its size by updating the link’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!