Alex Gibson

Create a simple animated navigation menu using MooTools

I thought I'd share a quick tutorial on how to create a simple animated navigation menu using MooTools. You can view a live example here to see what we are going to build. First, lets start with the plain HTML for our navigation menu:

<ul class="tab">
	<li><a class="nav" href="">Item 1</a></li>
	<li><a class="nav" href="">Item 2</a></li>
	<li><a class="nav" href="">Item 3</a></li>
	<li><a class="nav" href="">Item 4</a></li>
</ul>

Now, the CSS:

/*Navigation Styling*/
.tab { margin: 0; padding: 0; list-style:none; }
.tab li { float: left; width: auto; margin-left: 5px; text-align: center; background:#ff9900; color:#fff; }
.tab li a { display: block; padding: 10px; }

/*Link Styling*/
a.nav { color:#fff; text-decoration:none; border-bottom:0; }
a.nav:visited { color:#fff; text-decoration: none; border-bottom:0; }
a.nav:hover { background: #111; border-bottom:0; }
a.nav:active { background: #111; border-bottom:0; }

Next, the JavaScript. Make sure to visit the MooTools website and download MooTools Core. Include a reference to this file inside the header section of your HTML page. You will also need to include a reference to the JavaScript file that will contain the code for your animation (I have called this 'myscript.js').

<script type="text/javascript" src="mootools-1.2.3-core-yc.js"></script>
<script type="text/javascript" src="myscript.js"></script>

The JavaScript code for the menu animation is as follows. It creates ‘mouseenter’ and ‘mouseleave’ events for each item in the menu list and then morphs between the given CSS values when the user triggers each event.

window.addEvent('domready', function() {

	$$('.tab li a').each(function(el) { 
	var fx = new Fx.Morph(el,{ duration:300, link:'cancel' });
		el.addEvents({
		'mouseenter': function() { fx.start({ 
			'padding-bottom': 30
			}); 
		},
		'mouseleave': function() { fx.start({ 
			'padding-bottom': 10 
			}); 
		}
		});
	});
});