Simple Animated Menu for Mootools 1.2

Curious how to build something like the menu featured on this site for your next web design project? (note IE6 users - the menu is not implemented for you as your browser does not properly support png transparency, but with a solid background, it would work great). To make the menu, you won’t even have to muck about in javascript. Simply define:

• a container for the background image
• the nav elements
• the ‘current’ nav element ID
• the animation’s horizontal track (the y coordinate of the background-image)
• the left offset of the image in relation to the nav element

Basically, you just tell the function where to put the background image you want to animate, what the buttons are and how to identify the current id, then position its x and y coordinates in relation to the elements. If you are new to javascript web development, and not sure what this all means, keep reading. It breaks down very simply.

Installation

Install mootools 1.2, then copy and paste the code before the </head> tag in your html file, or save it as a .js and pull it in.

1. Download mootools 1.2, in my opinion, the best javascript library around.
2. Upload mootools 1.2 and link to it in the head tag (<script src=”/js/mootools1.2.js” type=”text/javascript”>)
3. Place the menu code between script tags (<script type=”text/javascript”> </script>), before the end of the head tag in your html (or)
4. Save the code as simple_animated_menu.js (or whatever you like) and link to in the head tag (<script src=”/js/animated_moomenu.js” type=”text/javascript”>)

Configuration

Javascript

You can configure the the code to work with your current menu by defining the options when calling the navArrowSlider() function.

1. Define the ID of the nav wrap
2. Define the navigation elements
3. Define the ID you use to denote the current tab
4. Define the background y position (the horizontal track for the image).
5. Define the left offset of the image in relation to the nav element (integer only, no “px” necessary)

navArrowSlider(
	'nav_wrap', // ID of nav wrap
	'#nav_wrap ul li', // Array selector of nav elements
	'active_nav', // ID of current nav element
	'20px', //  Background position y of background image
	'20' //  INT ONLY - How far left from the right edge of the nav element that the image settles
);

HTML

To use this code as a template for a new web design, you can copy and paste the following code.

<div id="nav_wrap">
 
<ul>
 
	<li id="active_nav">Tab 1</li>
 
 
	<li>Tab 2</li>
 
 
	<li>Tab 3</li>
 
 
	<li>Tab 4</li>
 
</ul>
 
</div>

CSS

Aside from your standard menu styles, you will need to add:

#nav_wrap {
	height: 100px; /* however tall it needs to be to fit your background image */
	width: 100%;
	background-image: url(/images/fancy_menu_image.png);
        padding-top: 50px; /* gives the image room to be viewed, pushing the ul down */
}

Notes:

This code has been tested in FF 3.0, FF 2.0, IE 7, IE 6 (minus image transparency), Safari for Windows and Opera 9.5.

Be sure to keep the ‘domready’ function around navArrowSlider() as mootools requires it to run.

The image will only return to the active nav element when you leave the ‘nav_wrap’ area. This lets you control when the image snaps back - for example, you can have it snap immediately when they leave the tabs by setting ‘nav_wrap’ to ‘width: auto; height: auto;’.

You can use the code anyway you like, and I would appreciate you letting me how if you use it your next web design project and what you think.

Hope you find this useful, and I look forward to hearing any feedback, questions or other comments.

Download a zip of all necessary files

*Including the mootools 1.2 core, the ’simple animated menu’ javascript file, an html menu file, a simple css file and an image.

Or you can copy and paste the code below.

var navArrowSlider = function(navWrap, navElementsArray, activeID, arrowY, leftOffset) {
	var youAreHere = new Fx.Tween($(navWrap), {
		duration: 1200,
		transition: Fx.Transitions.Elastic.easeOut  //adjust transition effect here
	});
 
	$$(navElementsArray).each(function(item){
		item.addEvent('mouseenter', function() {
			var thisPos = item.getPosition(navWrap).x  + item.getSize().x - leftOffset;
			youAreHere.cancel();
			youAreHere.start('background-position', thisPos + 'px ' + arrowY + 'px');
		});
	});
 
	var currentArrow = function() {
		youAreHere.cancel();
		var activePos = $(activeID).getPosition(navWrap).x  + $(activeID).getSize().x - leftOffset;
		youAreHere.start('background-position', activePos + 'px ' + arrowY + 'px');
	};
 
	//correct IE rendering problem (without this, it wont go to the active nav onload)
	var activePos = $(activeID).getPosition(navWrap).x  + $(activeID).getSize().x - leftOffset;
	$(navWrap).setStyle('background-position', activePos + 'px ' + arrowY + 'px');       
 
	//works to set image to starting position in other browsers
	currentArrow(); 
 
	$(navWrap).addEvent('mouseleave', currentArrow);
}; 
 
window.addEvent('domready', function() {
	navArrowSlider(
		'nav_wrap', // ID of nav wrap
		'#nav_wrap ul li', // Array selector of nav elements
		'active_nav', // ID of current nav element
		'20px', //  Background position y of background image
		'20' //  INT ONLY - How far left from the right edge of the nav element that the image settles
	);
});

This work is dedicated to the Public Domain.