Sometimes, simplicity is the most beautiful thing. This tutorial uses images and jQuery animate plus backgroundPosition Plugin to make the flipping/rotating effect. This will be a simple tutorial 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.
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>
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;
}
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});
}
);
});
Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, buy me a drink in the bottom of the page or, just bookmark it and help me to spread this tutorial to the rest of the people who you think they are interested! :) Thanks!
The effects and techniques demonstrated in tutorials on Queness can be used in whatever manner you wish without attribution. You cannot copy whole tutorials (unless permission is given), either in English or translated to another language.
Buy wholesale computers directly from China at DHgate.com
Discover the tools to build your e-Commerce Site with Netfirms
Recent Comments