we want to show you how to create a slick menu with a nice Css animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color. The Markup Our HTML will be an unordered list where each list item will contain an anchor element with the three elements inside that we’ll animate:

1. Animated Text and Icon Menu with jQuery
Today we wantto showyou howto create a slickmenuwitha nice Cssanimationfeature onhover.
The ideais to make some elementsslide out,change andanimate the backgroundcolorof the itemand
thenslide the elementsbackinwithadifferentcolor.
The Markup
Our HTML will be anunorderedlistwhere eachlistitemwill containananchorelementwiththe three
elementsinsidethatwe’ll animate:
<ul id="sti-menu"class="sti-menu">
<li data-hovercolor="#37c5e9">
<a href="#">
<h2 data-type="mText"class="sti-item">
Some text
</h2>
<h3 data-type="sText"class="sti-item">
Some more text

2. </h3>
<span data-type="icon"class="sti-iconsti-icon-care sti-item">
</span>
</a>
</li>
<li>...</li>
...
</ul>
The data-hovercolorwill be usedtosetthe colorof the texton hover.Also,we’llgive some data-type
attribute toeach headingandthe iconspan.We’ll use thatlater inour JavaScript.
Now,let’smake itstylish!
The CSS
Remember,we alwaysresetourCSSwitha reset.cssthatwe’ll addtoour mainstyle.
First,we’ll style the unorderedlistandgive ita fixedwidthsothatwe can centeriton the page:
.sti-menu{
width:1010px;
position:relative;
margin:60px auto 0 auto;
}
The listelementswill be floatingandalittle margin:
.sti-menuli{
float:left;

3. width:200px;
height:300px;
margin:1px;
}
Nowwe’ll style the anchor.We’ll hide all the overflow because we wanttoanimate the elements
outside of the anchor:
Demo | Dow nload