Create Snook-Style Navigation Using MooTools
Jonathan Snook debuted a great tutorial last September detailing how you can use an image and a few jQuery techniques to create a slick mouseover effect. I revisited his article and ported its two most impressive effects to MooTools.
The Images
These are the same images used in Snook's article.
The XHTML
<h2>Example 0: No Script</h2> <ul id="noscript"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <h2>Example A: Top down</h2> <ul id="a"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <h2>Example B: Right left</h2> <ul id="b"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
Three menus. The first will be a simple CSS-only mouseover, the other two will be varying MooTools versions.
The CSS
ul { list-style:none; margin:0; padding:0; }
li { float:left; width:100px; margin:0; padding:0; text-align:center; }
li a { display:block; padding:5px 10px; height:100%; color:#fff; text-decoration:none; border-right:1px solid #fff; }
li a { background:url(snook-animation-bg2.jpg) repeat 0 0; }
a:hover, a:focus, a:active { background-position:-150px 0; }
#a a { background:url(snook-animation-bg.jpg) repeat; background-position:-20px 35px; }
#b a { background:url(snook-animation-bg2.jpg) repeat; background-position:0 0; }
Nothing too notable here.
The MooTools JavaScript
window.addEvent('domready', function() {
/* example a: top down */
$$('#a a').each(function(el) {
//fx
var fx = new Fx.Tween(el,{
duration: 500,
link: 'cancel'
});
//css & events
el.setStyle('background-position','-20px 35px').addEvents({
'mouseenter': function(e) {
e.stop();
fx.start('background-position','-20px 94px');
},
'mouseleave': function(e) {
e.stop();
fx.start('background-position','-20px 35px');
}
});
});
/* example b: right left */
$$('#b a').each(function(el) {
//css
var reset = false;
var fx = new Fx.Tween(el,{
duration: 500,
link: 'cancel',
onComplete:function() {
if(reset) {
el.setStyle('background-position','0 0');
}
}
});
//events
el.setStyle('background-position','0 0').addEvents({
'mouseenter': function(e) {
e.stop();
fx.start('background-position','-150px 0');
reset = false;
},
'mouseleave': function(e) {
reset = true;
fx.start('background-position','-300px 0');
}
});
});
});
When you mouseover the last two navigation menu links, the background image animates from one spot to another creating a flash-like effect.
Credit goes to Snook for this great idea and original execution.
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
Great tutorial, thanks! I love being able to use Javascript to create animations which people think can only be done using flash. This particular example is one of my favourites.
the horizontal mode produces a really nice effect when moving cursor from one button to another.
wow…. this is great.. i like the second demo… it’s very funny :)
This example seems pretty useful if you have something a bit more abstract for a background. The “oozing” effect you get by tween the background-position is quite cool.
I recently saw an article here where they had ported over a jquery effect someone had created for working with sprites into mootools. Also useful.
I like example B when moving right to left as it looks like it is shifting. Is there a way to detect the user coming from a left side button going right and have it switch the direction?
should be doable, if u make geht the mouse position on entering the img, so 4 exapmle, if img has 100px with. if entering vom 0->50px left-> right, if 51-100, right->left or?
To be able to detect left or right, I’d probably set up each element within the nav with an index and then shift left or right depending on whether the current index is higher or lower than the last index.
David, thanks for porting the work over to Mootools. It looks good!
@Mark: I think what I would do is the same as Alelo. Check where the mouse entered the image and move the background accordingly.
@Jonathan Snook: Thanks!
Strange, that was about to be my next blog entry :O
I love doing this kind of thing. Flash certainly has it’s abilities that javascript can’t even touch, but most of the time javascript effects are every bit as good for buttons.
Awesome! Thanks
Great tutorial! Thanks. Added to tutlist.com
Great tutorial! Thanks. Added to tutlist.com
Very nice indeed – the effect’s not too in-your-face, nice and fairly subtle. I like it :)
Effect is not working on Mootools 1.2.1
@Jonathan: Works for me: http://davidwalsh.name/dw-content/snook-animation-121.php
Ok, thanks! I download again a mootools 1.2.1 and it works now.
Hi David, thx too much, i used this script in new layout of my site.
bye
Nunzio
David,
I am trying to change the bg color of visited links using this menu, any idea how to get that done.
Thanks
Visesh
Hi David,
i was looking another time this post, ‘because i like a lot it… i suggest you an idea… you can optimize the third animation using two senses of horizontal transition.. in this way if i arrive from the link to the left it seems that the blue band follow me, and the same if arrive to the link on center from the right link… like you in this moment
what do you think about it? I’m interested on your opinion because I’m thinking if it’s better to use a DIV that follow my mouse movement (like an arrow that I’m developing for a web site in these days) or using this trick CSS/JS can be a good idea …
wow…. this is awesome.. i like the second demo…
Hi David,
Is there anyway to keep the “hover” state active, until you click on one of the other links?
Hello, on my site don’ t work with opera and firefox! but with ie and chrome work…
Can you do it with mootools 1.1?
I’ve been trying with fx.styles but I get an error with IE when I try to change “background-position”, other properties work fine!!!
have you got any ideas?
Ya I’ve been trying to do it with mootools 1.1 too. Background-position gives an error that saids ‘push’ is null or not an object. Help~~
William: 1.1 is almost 2 years old now — time to upgrade?
@David Walsh: I know :( However, my site runs on joomla and it’ll be a lot of backward coding if I upgrade. The 1.1 layer doesn’t work with half of my scripts running on the site now.
@William I have the same problem as you, Joomla bounds me to the confines of 1.11,
I needed the same effect and used fx.styles. seemed to work ok in ie6:
var gallery_a = $$(‘#slideshow ul li a’);
gallery_a.each(function(element) {
var fx = new Fx.Styles(element, {duration: 300, wait: false, transition: Fx.Transitions.Sine.easeIn});
element.addEvent(‘mouseenter’, function(){
fx.start({
‘background-position’: ['290px 0px', '253px 0px'],
‘padding-right’: ['0px','50px']
});
});
element.addEvent(‘mouseleave’, function(){
fx.start({
‘background-position’: ['253px 0px', '290px 0px'],
‘padding-right’: ['50px','0px']
});
});
});
Hi David;
if one of “Li”s (first li, for exmple) has “current_page_item” class (class=”current_page_item”) like wordpress menu; how can I disable events for it?
Thanks.