Fancy Navigation with MooTools Javascript

Written by David Walsh on Tuesday, September 16, 2008

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.

Navigation menus are traditionally boring, right? Most of the time the navigation menu consists of some imagery with a corresponding mouseover image. Where’s the originality? I’ve created a fancy navigation menu that highlights navigation items and creates a chain effect.

View Demo

The XHTML

<ul>
	<li><a href="somewhere.php" class="nav">Nav Item 1</a></li>
	<li><a href="somewhere.php" class="nav">Nav Item 2</a></li>
	<li><a href="somewhere.php" class="nav">Nav Item 3</a></li>
	<li><a href="somewhere.php" class="nav">Nav Item 4</a></li>
	<li><a href="somewhere.php" class="nav">Nav Item 5</a></li>
	<li><a href="somewhere.php" class="nav">Nav Item 6</a></li>
	<li><a href="somewhere.php" class="nav">Nav Item 7</a></li>
	<li><a href="somewhere.php" class="nav">Nav Item 8</a></li>
	<li><a href="somewhere.php" class="nav">Nav Item 9</a></li>
	<li><a href="somewhere.php" class="nav">Nav Item 10</a></li>
</ul>

Just some simple XHTML links with the nav class. Nothing special here.

The CSS

.nav			{ background:#000; color:#ddd; display:block; width:200px; }

I’ve placed a default background color on my anchors. This will come into play with the MooTools color change.

The MooTools Javascript

window.addEvent('domready', function() {
	$each($$('a.nav'),function(el) {
		el.addEvent('mouseenter', function() {
			el.highlight(el.getStyle('background-color'),'#333');
		});
		el.addEvent('mouseleave', function() {
			el.highlight(el.getStyle('background-color'),'#000');
		});	
	});
});

For every link with the nav class, we add a MooTools highlight() effect on both mouseenterand mouseleave View Demo

This effect is probably too much (or too little) for a business website but could be a nice touch for a personal website.

Download PDF

Follow via RSS Epic Discussion

September 16 / #

andrei009 says:

the good/short code

$$(‘a.nav’).addEvents({
mouseenter: function(){
$(this).highlight($(this).getStyle(‘background-color’),’#333′);
},
mouseleave: function(){
$(this).highlight($(this).getStyle(‘background-color’),’#000′);
}
});

September 16 / #

Steinmann says:

Why not <ul class=”nav”> and then:

$$(’.nav a’).addEvents({
mouseenter: function(){
$(this).highlight($(this).getStyle(’background-color’),’#333′);
},
mouseleave: function(){
$(this).highlight($(this).getStyle(’background-color’),’#000′);
}
});

September 16 / #

david says:

@Steinmann: Awesome idea, I have no idea how I missed that. I must be working to much lately…

September 16 / #

Eric Wendelin says:

Still a lot of coolness for such a little function :)

September 16 / #

Dave says:

A similar effect in jQuery:

$(“.nav”).hover(function(){
$(this).fadeOut(0);
},function(){
$(this).fadeIn(“slow”);
})

Though to do it properly you really need http://plugins.jquery.com/project/color

January 24 / #

Martin says:

I think there might be problems with opera 9.6.
The highlight effect doesn`t work.

April 21 / #

gus says:

Forgive me, but I’m having a hard time finding an example of the plugin in action on this page. Wouldn’t it be a good idea to simply show folks what the working result looks like? Because I’m certainly not going to invest time setting this all up if it’s just on the hope that it’s exactly what I’m looking for.