Sexy CSS3 menu

from:http://www.red-team-design.com/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.

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

View demo