Treehouse

Fancy Navigation with MooTools JavaScript

By on  

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.

ydkjs-2.png

Recent Features

Incredible Demos

Discussion

  1. andrei009

    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

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

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

    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. Awesome Chris!

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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!