Introduction
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.
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}); } ); });
Conclusion
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!
Comments will be moderated and
rel="nofollow"
will be added to all links. You can wrap your coding with[code][/code]
to make use of built-in syntax highlighter.i recreated this menu for my website and have horizontly centred it on my page, but when checking it on Internet Explorer 6 and above the images seem to be visable both top and bottom of rollover part.
i have tried everything, no problems in safari or firefox. Any help?
Also sorry if this seems a bit dumb but how would i keep the button from rolling back to it's original state once the viewer is on the page it links to... i have tired adding 'selected' to the class but it doesn't seem to be working...
Thanks
I mean when I press on the link within the image remains fixed and the rest of the links work normally, and when you press on the other link interface Previous become animate and the link that you press them become stable
i followed your tutorial, altering only
the images used. i want to do two things... 1, have a larger space between the horizontal images...
2, this is really troublesome... i don't want my text to float on the left of the horizontal menu, instead i want it centred in the page, i have tried nearly everything... it's probably something really simple, any help would be great, i can post my css code if that will help.
thanks
it's ok i figured it out after going back to it after a couple of hours later... must have been tired.
Great tutorial by the way.
im trying to get this to work with my wordpress them but i can :-(
my site is the one im trying to add it to ??
where do i add this
$(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});
}
);
First of all, this is an awesome tutorial.
Now,
I was wondering if there is any way of keeping the colored link when the link corresponds to the active page.
Thanks a lot.
AB.
anyway is this compatible with IE6 or above?
thanks