Красивая навигация при помощи MooTools

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


Как всегда, делаем навигацию неупорядоченным списком по стандарту 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. Вот так. Все очень простои легко ;)

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

3 комментария

  1. ig0tik:

    Спасиб за совет, шя будем пробовать.

    [Ответить]

  2. IVASHKA:

    Я с mootools встретился недавно(2 дня назад) и у мя тут же возникает вопрос: А это класс подходит под движок DLE ???

    [Ответить]

    rsboarder:

    не очень понял)) какой класс?

    [Ответить]

Оставьте свой отзыв!

XHTML:
Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>