Create Snook-Style Navigation Using MooTools

Written by David Walsh on Monday, February 23, 2009

This article may feature code that is no longer best practice in MooTools.
Click here to learn what has changed to make your code framework-compatible.

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.

View Demo

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.

View Demo

Credit goes to Snook for this great idea and original execution.

Download PDF

Follow via RSS Epic Discussion

February 23 / #

Clinton Montague says:

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.

February 23 / #

olivier says:

the horizontal mode produces a really nice effect when moving cursor from one button to another.

February 23 / #

moonkiki says:

wow…. this is great.. i like the second demo… it’s very funny :)

February 23 / #

Jem says:

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.

February 23 / #

Mark Sanborn says:

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?

February 23 / #

Alelo says:

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?

February 23 / #

Jonathan Snook says:

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!

February 23 / #

david says:

@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!

February 23 / #

rpflo says:

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.

February 24 / #

Abhisek says:

Awesome! Thanks

February 24 / #

Jason says:

Great tutorial! Thanks. Added to tutlist.com

February 24 / #

Jason says:

Great tutorial! Thanks. Added to tutlist.com

February 25 / #

Shane says:

Very nice indeed – the effect’s not too in-your-face, nice and fairly subtle. I like it :)

March 03 / #

Jonathan says:

Effect is not working on Mootools 1.2.1

March 03 / #

David Walsh says:

@Jonathan: Works for me: http://davidwalsh.name/dw-content/snook-animation-121.php

March 04 / #

Jonathan says:

Ok, thanks! I download again a mootools 1.2.1 and it works now.

April 05 / #

moonkiki says:

Hi David, thx too much, i used this script in new layout of my site.
bye
Nunzio

April 10 / #

visesh says:

David,

I am trying to change the bg color of visited links using this menu, any idea how to get that done.

Thanks
Visesh

April 10 / #

nunzio fiore says:

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 …

April 19 / #

Adam Winogrodzki says:

wow…. this is awesome.. i like the second demo…

May 29 / #

John Dupras says:

Hi David,

Is there anyway to keep the “hover” state active, until you click on one of the other links?

July 15 / #

matteo says:

Hello, on my site don’ t work with opera and firefox! but with ie and chrome work…

August 29 / #

Xavi says:

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?

September 18 / #

William says:

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~~

September 18 / #

David Walsh says:

William: 1.1 is almost 2 years old now — time to upgrade?

September 18 / #

William says:

@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.