Herinner je je de tijd dat animated gif’s cool waren, overal (soms in overuse) gebruikt werden en het niemand scheelde dat bandbreedte een issue was? Natuurlijk kan je Jquery gebruiken, maar laten we eens terug gaan in de tijd een een good old fashion animated gif gebruiken om een menu te animeren:

Download animated gif

HTML

<div id="content">
<ul id="main_nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="post clear">
<h4 class="clear">HEADLINE</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ut dui ut mauris congue bibendum. Vestibulum fringilla purus nec turpis. Nunc ut ante eu purus eleifend convallis. Nulla euismod ornare arcu. Donec enim enim, sodales sit amet, egestas a, suscipit at, lorem. Ut congue consequat lectus. Aliquam porttitor aliquam dui. Donec ipsum. Donec pharetra leo vel ante. Curabitur ac ligula id felis scelerisque imperdiet. Sed ullamcorper lectus at urna. Pellentesque blandit iaculis risus. Donec facilisis neque nec lorem. Aliquam erat volutpat. Morbi a nunc. Aenean feugiat tellus vitae nulla.</p>
<h4 class="clear">HEADLINE 2</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ut dui ut mauris congue bibendum. Vestibulum fringilla purus nec turpis. Nunc ut ante eu purus eleifend convallis. Nulla euismod ornare arcu. Donec enim enim, sodales sit amet, egestas a, suscipit at, lorem. Ut congue consequat lectus. Aliquam porttitor aliquam dui. Donec ipsum. Donec pharetra leo vel ante. Curabitur ac ligula id felis scelerisque imperdiet. Sed ullamcorper lectus at urna. Pellentesque blandit iaculis risus. Donec facilisis neque nec lorem. Aliquam erat volutpat. Morbi a nunc. Aenean feugiat tellus vitae nulla.</p>
</div>
</div>

CSS

body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #fff;
background: #2d2d2d;
}
#content {
width: 600px;
padding: 0 0 0 20px;
}
#main_nav {
list-style: none;
margin: 0;
padding: 0;
}
#main_nav li {
float: left;
}
#main_nav li a {
display: block;
width: 150px;
height: 65px;
padding: 85px 0 0 0px;
color: #fff;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
background: url(twinkle.gif) no-repeat 0 0;
}
#main_nav li a:hover {
background-position: -150px 0; color: #fff;
}
.post {
padding-top: 18px;
line-height: 18px;
}
h4 {
margin: 8px 0 6px 0;
}
p {
line-height: 18px;
font-size: 12px;
margin: 0 0 18px 0;
}
.clear {
clear: both;
}