This will be the culmination of the four part series on MooTools for non programmers. In this installment we will take all that we learned in the previous parts and put it together to make a flash menu system.

First things first. We need some HTML to make our menu. This is just a basic unorded list. We’ve all used them thousands of times before so not much explanation needed here.

First
Second
Third
Fourth
Fifth

Pretty simple so far. Out list is pretty ugly at this point so we are going to add some style to it. Again, this will just be some really basic CSS applied to our list.

#moveMeList li {
	display: block;
	margin: 0;
	padding: 4px;
	width: 120px;
	background: #f90;
	color: #fff;
	cursor: pointer;
	list-style-type:none;
}

We’ve got our HTML and CSS all fleshed out so all thats left if the wonderful javascript. MooTools makes this almost too easy. We are going to animate the color of the text, background color, height and margin of our list items when you mouseover them. This all adds up to a pretty neat effect as illustrated below.

window.addEvent('domready', function() {
// Grab all of our list items
var ListEles = $$('#moveMeList li');
	// Loop through our list items
	ListEles.each(function(item, index) {
		// Set our morph defaults
		item.get('morph', { duration: 500, transition: 'bounce:out' })
		// Add a mouseeneter event listener to trigger our effect
		item.addEvent('mouseenter', function(e) {
			$(e.target).morph({
				marginLeft: 20,
				color: '#333',
				backgroundColor: '#ff3',
				height: 35
			});
		});
		// Add a mouseleave event listener to trigger our effect
		item.addEvent('mouseleave', function(e) {
			$(e.target).morph({
				marginLeft: 0,
				color: '#fff',
				backgroundColor: '#f90',
				height: 20
			});
		});
	});
});

This entry was posted on Wednesday, March 19th, 2008 at 7:13 pm and is filed under MooTools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.