Animated CSS3 Nav

by nate

HTML

<nav>
    <ul class="buttons">
        <li><a href="#">Home</a></li>
        <li><a href="#1">About</a></li>
        <li><a href="#2">Work</a></li>
        <li><a href="#3">Contact</a></li>
    </ul>
</nav>

CSS

body {
    background-image: url( http://xyzgoclub.com/images/goban.jpg );
    font-family: Lucida Grande;
    padding: 25px;
}

nav {
    background-color: hsl( 180, 24%, 70% );
    border: 1px solid hsla( 180, 33%, 23%, 0.5 );
    font-size: 18px;
    overflow: hidden;
    width: 200px; 
 
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
   
    -moz-box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.2);
    -o-box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.2);
    -webkit-box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.2);
    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.2);
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    background-color: hsl( 180, 33%, 33% );
    margin-left: -1.5em;
    
    -moz-transition: margin-left 0.2s;
    -o-transition: margin-left 0.2s;
    -webkit-transition: margin-left 0.2s;
    transition: margin-left 0.2s;
}

nav:hover ul li.current {
    margin-left: -1.5em;
}

nav ul li.current,
nav ul li:hover {
    margin: 0;
}

nav ul li:before {
    background-color: hsl( 180, 33%, 33% );
    background-image:
        -moz-linear-gradient( bottom,
            hsl( 180, 33%, 33% ) 0%,
            hsl( 180, 43%, 35% ) 100%
        );
    background-image:
        -webkit-gradient( linear, left bottom, left top,
            from( hsl( 180, 33%, 33% ) ),
            to( hsl( 180, 43%, 35% ) )
        );
    border-right: 1px solid hsla( 180, 33%, 100%, 0.8 );
    color: hsl( 0, 0%, 100% );
    content: '→';
    float: left;
    font-weight: bold;
    margin-right: 0.5em;
    padding: 0.5em;
    text-shadow: 1px 1px 0 hsla( 180, 33%, 23%, 0.5 );
}

nav ul li a {
    background-color: hsl( 180, 24%, 54% );
    background-image:
        -moz-linear-gradient( bottom,
            hsl( 180, 24%, 49% ) 0%,
            hsl( 180, 24%, 54% ) 100%
        );
    background-image:
        -webkit-gradient( linear, left bottom, left top,
            from( hsl( 180, 24%, 49% ) ),
   ...