Fancy Navigation with MooTools JavaScript

Written by David Walsh on September 16, 2008 · 10 Comments

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

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

Comments

  1. andrei009 September 16, 2008

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

  2. Steinmann September 16, 2008

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

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

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

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

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

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

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

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

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

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
MooTools Form Field Default Plugin
Newer
Simple MooTools Event / Class Binding