Сьогодні ми з вами навчимося робити меню з простою анімацією. Дану реалізацію я підглянув в статті Create a Simple Animated Navigation Menu using MooTools. Її автор використовує це меню в себе на блозі, в чому ви легко можете переконатися (дивіться зверху справа). Або ж клікайте на демонстраційний приклад для перегляду чи тут для завантаження. Щоб додати анімацію він використовує основи HTML, CSS і зовсім трохи MooTools.

По-перше, почнемо з HTML для нашого навігаційного меню:

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

А так виглядає запропонований ним CSS:

// оформляємо меню
.tab {
	float: right;
	margin: 0;
	padding: 0;
}
.tab li {
	float: left;
	width: auto;
	margin-left: 5px;
	text-align: center;
	background: #ff9900;
	color: #fff;
}
.tab li a {
	display: block;
	padding: 10px;
}

// оформляємо лінки
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;
}

На черзі JavaScript код. Для початку слід підключити фреймворк MooTools. Також необхідно включити JavaScript файл "myscript.js", який буде містити код для анімації. Для цього пропишіть наступний код в шапці документу, тобто в тілі тегу head.

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

JavaScript код (файл myscript.js) для анімації виглядає наступним чином:

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,
			'background-color' : '#111'
			});
		},
		'mouseleave': function() { fx.start({
			'padding-bottom': 10,
			'background-color' : '#FF9900'
			});
		}
		});
	});
});

Також до теми раджу подивитися на статтю Олексія Ільїна Меню с выпадающими кнопками на Mootools. У цій статті він показує як зробити меню з кнопками, що випадають.