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.


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

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


.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.addEvent('mouseleave', function() {

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

Upcoming Events

Recent Features

  • Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • Chris Coyier&#8217;s Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

Incredible Demos

  • Link Nudging Using Dojo

    In the past we've tinkered with link nudging with MooTools and link nudging with jQuery. In an effort to familiarize myself with other JavaScript frameworks, we're going to try to duplicate that effect with another awesome framework: Dojo. The JavaScript: Attempt...

  • MooTools TwitterGitter Plugin

    Everyone loves Twitter. Everyone loves MooTools. That's why everyone should love TwitterGitter, a MooTools plugin that retrieves a user's recent tweets and allows the user to format them however the user would like. TwitterGitter allows the user to choose the number of...


  1. andrei009

    the good/short code

        mouseenter: function(){
        mouseleave: function(){
  2. Steinmann

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

    $$(’.nav a’).addEvents({
            mouseenter: function(){
            mouseleave: function(){
  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:


    Though to do it properly you really need

  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…

  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!