Simple vertical menu with css3 animation

In this article i will show you how to create a simple vertical menu with css3 animation. This is very useful who want to create a simple vertical menu with different manner using simple animation. This is something different and looking nice.

The above example shows to create simple vertical navigation with  animation effect using css3. you can download code available above and you can customize the colors and demo also available.

Html code for vertical navigation with css3 animation:

<div class="container">
<div class="content">
<ul class="sanmenu">
<li>
<a href="#">
<div class="sancontent">
<h2 class="sanmain">sanwebcorner1</h2>

</div>
</a>
</li>
<li>
<a href="#">
<div class="sancontent">
<h2 class="sanmain">sanwebcorner2</h2>

</div>
</a>
</li>
<li>
<a href="#">
<div class="sancontent">
<h2 class="sanmain">sanwebcorner3</h2>

</div>
</a>
</li>
<li>
<a href="#">
<div class="sancontent">
<h2 class="sanmain">sanwebcorner4</h2>

</div>
</a>
</li>
<li>
<a href="#">
<div class="sancontent">
<h2 class="sanmain">sanwebcorner5</h2>

</div>
</a>
</li>
</ul>
</div><!-- content -->
</div>

Css code for vertical navigation with css3 animation:

.sanmenu{

    padding: 0;

    margin: 20px auto;

    width: 500px;

}

.sanmenu li{

    width: 250px;

    height: 50px;

    overflow: hidden;

    display: block;

    background: #fff;

    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

    margin-bottom: 4px;

    border-left: 10px solid #000;

    -webkit-transition: all 300ms ease-in-out;

-moz-transition: all 300ms ease-in-out;

-o-transition: all 300ms ease-in-out;

-ms-transition: all 300ms ease-in-out;

transition: all 300ms ease-in-out;

}

.sanmenu li:last-child{

    margin-bottom: 0px;

}

.sanmenu li a{

    text-align: left;

    display: block;

    width: 100%;

    height: 100%;

    color: #333;

    position:relative;

}

.sanicon{

    font-family: 'WebSymbolsRegular', cursive;

    font-size: 20px;

    text-shadow: 0px 0px 1px #333;

    line-height: 90px;

    position: absolute;

    width: 90px;

    left: 20px;

    text-align: center;

    -webkit-transition: all 300ms linear;

    -moz-transition: all 300ms linear;

    -o-transition: all 300ms linear;

    -ms-transition: all 300ms linear;

    transition: all 300ms linear;

}

.sancontent{

    position: absolute;

    left: 25px;

    width: 370px;

    height: 60px;

}

.sanmain{

    font-size: 16px;

    -webkit-transition: all 300ms linear;

    -moz-transition: all 300ms linear;

    -o-transition: all 300ms linear;

    -ms-transition: all 300ms linear;

    transition: all 300ms linear;

}

.sansub{

    font-size: 14px;

    color: #666;

    -webkit-transition: all 300ms linear;

    -moz-transition: all 300ms linear;

    -o-transition: all 300ms linear;

    -ms-transition: all 300ms linear;

    transition: all 300ms linear; 

}

.sanmenu li:hover{

    border-color: #fff004;

    background: #000;

}

.sanmenu li:hover .sanicon{

    color: #fff004;

    text-shadow: 0px 0px 1px #fff004;

    font-size: 50px;

}

.sanmenu li:hover .sanmain{

    color: #fff004;

    font-size: 14px;

}

.sanmenu li:hover .sansub{

    color: #fff;

    font-size: 30px;

}