Learn how to create a simple, but elegant menu by animating background with jquery backgroundPosition plugin. It's simple, but the effect is really good.

Sometimes, simplicity is the most beautiful thing. This example uses images and jQuery animate plus backgroundPosition Plugin to make the flipping/rotating effect. This will be a simple example and I believe it has a great potential to become something really creative. Check out the demo and I hope you all will like it.

1. HTML

As usual, we want to keep the HTML as simple as possible. I guess this is the minimal code for a menu.

 <b>Horizontal Menu</b>
 <ul id="hor">
  <li><a href="#" class="home">Home</a></li>
  <li><a href="#" class="download">Download</a></li>
  <li><a href="#" class="contact">Contact</a></li>

 </ul>

 <div class="clear"></div>
 <br/><br/>

 <b>Vertical Menu</b>
 <ul id="ver">
  <li><a href="#" class="home">Home</a></li>
  <li><a href="#" class="download">Download</a></li>
  <li><a href="#" class="contact">Contact</a></li>
 </ul>

2. CSS

This time, we don't have to do much with the CSS. The following is just a simple configuration of a menu. With a little bi of CSS Sprites used for the menu images, the rest are just basic CSS.

/* CSS Style for Horizontal Menu */ 
#hor {
 list-style:none;
 padding:0;
 margin:0; 
}

 #hor li {
  float:left;
  padding:5px;
 }

 #hor a {
  display:block;
  height: 12px;
  text-indent:-999em;
 }
   
 #hor a.home {
  width:46px; 
  background:url(vHome.gif) no-repeat 0 0; 
 }

 #hor a.download {
  width:94px; 
  background:url(vDownload.gif) no-repeat 0 0; 
 }
   
 #hor a.contact {
  width:74px; 
  background:url(vContact.gif) no-repeat 0 0; 
 }


/* CSS Style for Vertical Menu */ 
 
#ver {
 list-style:none;
 padding:0;
 margin:0; 
}
  
 #ver li {
  padding:2px; 
 }
  
 #ver li a {
  display:block;
  height:12px;
  text-indent:-999em;
 }   
   
 #ver a.home {
  width:47px; 
  background:url(hHome.gif) no-repeat 0 0; 
 }

 #ver a.download {
  width:95px; 
  background:url(hDownload.gif) no-repeat 0 0; 
 }
   
 #ver a.contact {
  width:74px; 
  background:url(hContact.gif) no-repeat 0 0; 
 }
   
   
 .clear {
  clear:both; 
 } 

3. Javascript

With the background position jquery plugin, what we need to do is to set the backgroundPosition properties to the right top and left value.

 
$(document).ready(function () {

 /* Horizontal Menu */
 $('#hor li a').hover(
  function () {
   //convert current height to negative value
   height = $(this).height() * (-1);
   $(this).stop().animate({'backgroundPosition':'(0 ' + height + ')'}, {duration:200}); 
  }, 
   
  function () {
   //reset the top position
   $(this).stop().animate({'backgroundPosition':'(0 0)'}, {duration:200}); 
  }
 );

 /* Vertical Menu*/
 $('#ver li a').hover(
  function () {
   //convert current width to negative value
   width = $(this).width() * (-1);
   $(this).stop().animate({'backgroundPosition':'(' + width + ' 0)'}, {duration:200}); 
  }, 
   
  function () {
   //reset the left position
   $(this).stop().animate({'backgroundPosition':'(0 0)'}, {duration:200}); 
  }
 );
  
});