Навигация на многих сайтах очень скучна,правда? Тк давайте сделаем вместе с вами красивую навигацию

Как всегда, делаем навигацию неупорядоченным списком по стандарту XHTML.

<ul>
	<li><a class="nav" href="#">Пункт 1</a></li>
	<li><a class="nav" href="#">Пункт 2</a></li>
	<li><a class="nav" href="#">Пункт 3</a></li>
	<li><a class="nav" href="#">Пункт 4</a></li>
	<li><a class="nav" href="#">Пункт 5</a></li>
	<li><a class="nav" href="#">Пункт 6</a></li>
	<li><a class="nav" href="#">Пункт 7</a></li>
	<li><a class="nav" href="#">Пункт 8</a></li>
	<li><a class="nav" href="#">Пункт 9</a></li>
	<li><a class="nav" href="#">Пункт 10</a></li>
</ul>

И создадим стиль для класса nav.

.nav	{ background:#000; color:#ddd; display:block; width:200px; }

А теперь сам код на MooTools:

window.addEvent('domready', function() {
	$each($$('a.nav'),function(el) {
		el.addEvent('mouseenter', function() {
			el.highlight(el.getStyle('background-color'),'#333');
		});
		el.addEvent('mouseleave', function() {
			el.highlight(el.getStyle('background-color'),'#000');
		});
	});
});

Как только DOM загружен мы у ссылки с классом nav по mouseenter и mouseleave изменяем свойство background-color. Вот так. Все очень простои легко

Посмотреть пример.
Скачать архив.