Animated Text and Icon Menu with jQuery
Today 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:
<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 </h3> <span data-type="icon" class="sti-icon sti-icon-care sti-item"> </span> </a> </li> <li>...</li> ... </ul> The data-hovercolor will be used to set the color of the text on hover. Also, we’ll give some data-type attribute to each heading and the icon span. We’ll use that later in our JavaScript.
Now, let’s make it stylish!
The CSS Remember, we always reset our CSS with a reset.css that we’ll add to our main style. First, we’ll style the unordered list and give it a fixed width so that we can center it on the page:
.sti-menu{ width:1010px; position:relative; margin:60px auto 0 auto; } The list elements will be floating and a little margin:
.sti-menu li{
float:left; width:200px; height:300px; margin:1px; } Now weâ&#x20AC;&#x2122;ll style the anchor. Weâ&#x20AC;&#x2122;ll hide all the overflow because we want to animate the elements outside of the anchor: Demo | Download