• Demos and Downloads!
• MooTools Plugins
• About / Contact

Fancy Navigation with MooTools JavaScript

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.

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 »

1. 

   andrei009

   September 16, 2008 @ 7:42 am

   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′);
   }
   });

   Reply
2. 

   steinmann

   September 16, 2008 @ 9:02 am

   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′);
   }
   });

   Reply
3. 

   david

   September 16, 2008 @ 9:08 am

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

   Reply
4. 

   eric wendelin

   September 16, 2008 @ 9:44 am

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

   Reply
5. 

   dave

   September 16, 2008 @ 10:38 am

   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

   Reply
6. 

   martin

   January 24, 2009 @ 12:46 pm

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

   Reply
7. 

   gus

   April 21, 2009 @ 10:31 am

   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.

   Reply
8. 

   chris van rensburg

   September 24, 2009 @ 2:05 am

   You might find these menu effects compelling, built using the UIZE JavaScript Framework…

   http://www.uize.com/examples/hover-fader-color-effects.html

   Reply
9. 

   david walsh

   September 24, 2009 @ 7:32 am

   Awesome Chris!

   Reply
10. 

    david walsh

    September 24, 2009 @ 7:33 am

    Really awesome Chris! Not as subtle as I like but I think it would appeal to many others.

    Reply