Интересное меню на Mootools

Сегодня мы научимся создавать меню с анимацией. Пример этого меню, Вы можете посмотреть здесь.

Вот пошаговая инструкция по созданию такого меню:

1. Скачаем эти две картинки, и поместим их в корень вашего сайта.

2. Скачаем скрипт анимации, сохраним его также в корень сайта и подключим к html файлу:

<script type="text/javascript" src="mootools.js"></script>

3. Включим следующие css-стили в ваш css файл, или пропишем их между тегами <heаd></heаd>

ul { list-style:none; margin:0; padding:0; }
li { float:left; width:100px; margin:0; padding:0; text-align:center; }

li a { display:block; padding:5px 10px; height:100%; color:#fff; text-decoration:none; border-right:1px solid #fff; }
li a { background:url(snook-animation-bg2.jpg) repeat 0 0; }
a:hover, a:focus, a:active { background-position:-150px 0; }

#a a { background:url(snook-animation-bg.jpg) repeat; background-position:-20px 35px; }
#b a { background:url(snook-animation-bg2.jpg) repeat; background-position:0 0; }

4. Пропишем между тегами <heаd></heаd> скрипт Javascript Mootools:

<script type="text/javascript">

window.addEvent('domready', function() {

/* example a:  top down */

$$('#a a').each(function(el) {

//fx

var fx = new Fx.Tween(el,{

duration: 500,

link: 'cancel'

});



//css & events

el.setStyle('background-position','-20px 35px').addEvents({

'mouseenter': function(e) {

e.stop();

fx.start('background-position','-20px 94px');

},

'mouseleave': function(e) {

e.stop();

fx.start('background-position','-20px 35px');

}

});

});



/* example b:  right left */

$$('#b a').each(function(el) {

//css

var reset = false;

var fx = new Fx.Tween(el,{

duration: 500,

link: 'cancel',

onComplete:function() {

if(reset) {

el.setStyle('background-position','0 0');

}

}

});

//events

el.setStyle('background-position','0 0').addEvents({

'mouseenter': function(e) {

e.stop();

fx.start('background-position','-150px 0');

reset = false;

},

'mouseleave': function(e) {

reset = true;

fx.start('background-position','-300px 0');

}

});

});



}); </script>

5. И непосредственно вставим само меню в то место, в котором вы желаете, чтобы оно отображалось:

Первое меню (нужно заметить, что оно выполнено без использования скрипта, а только с помощью CSS)

<ul id="noscript">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Второе меню:

<ul id="a">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Третье меню:

<h2>Example B: Right left</h2>
<ul id="b">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>