CSS3 Vertical Menu With Animation

Here is very nice vertical menu with animation on hover,

Here is the demo

If you like it then follow step – by – step tutorial,

Copy CSS from here,

.cbt-menu{
    padding: 0;
    margin: 20px 20px;}
.cbt-menu li{
    width: 320px;
    height: 60px;
    overflow: hidden;
    display: block;
    background: transparent;
    -webkit-box-shadow: 1px 1px 2px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2);
    border-left: 5px solid #000;
    border-right: 5px solid #000;
font-family:Donegal One;
border-top:1px dashed #000;
border-bottom:1px dashed #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;
}
.cbt-menu h2
{
margin:0;padding:0;
}
.cbt-menu li a{
    text-align: left;
    display: block;
    width: 100%;
    height: 100%;
    color: #000;
    position:relative;
}

.cbt-content{
    position: absolute;
    left: 10px;
    width: 370px;
    height: 50px;
}
.cbt-main{
    font-size: 30px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.cbt-menu li:hover,.cbt-main:hover{
    border-color: #fff004;
    background: #000;
font-size:50px;
}
.cbt-menu li:hover {
    color: #fff004;
    text-shadow: 0px 0px 1px #fff004;
}
.cbt-menu li:hover .cbt-main{
    color: #fff004;
}

Now Go to html/javascript
and paste following html code,

 <ul class=”cbt-menu”>
<li>
<a href=”#”>
<div class=”cbt-content”>
<h2 class=”cbt-main”>Home</h2>
</div>
</a>
</li>
<li>
<a href=”#”>
<div class=”cbt-content”>
<h2 class=”cbt-main”>About</h2>
</div>
</a>
</li>
<li>
<a href=”#”>
<div class=”cbt-content”>
<h2 class=”cbt-main”>This is Cool</h2>
</div>
</a>
</li>
<li>
<a href=”#”>
<div class=”cbt-content”>
<h2 class=”cbt-main”>Nice One</h2>
</div>
</a>
</li>
<li>
<a href=”#”>
<div class=”cbt-content”>
<h2 class=”cbt-main”>Contact</h2>
</div>
</a>
</li>
</ul>

Now you’re Done enjoy stylish animated Vertical menu!!
If you really like us then give credit in menu with link of this article,
Subscribe us and Like Us.

Share This Now:

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *