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.

Track.js Error Reporting

Recent Features

  • CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • Add Site Screenshots for External Links Using MooTools Tooltips

    Before you send your user to an unknown external website, why not provide them a screenshot of the site via a tooltip so they may preview the upcoming page? Here's how you can do just that using MooTools. The MooTools JavaScript The first step is to grab...

  • Create a Simple Slideshow Using MooTools

    One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events.

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!