Javascript: Графическое меню на MooTools

Интересная штука на Javascript. Можно использовать как графическое меню для сайта или ещё для чего нибудь. Исполнено на mootools. Mootools всё чаще и чаще встречается во многие скриптах. Это и неудивительно. Ведь работы, выполненные на этом фреймворке, обладают кросс-браузерностью, гибкостью и элегантностью.

Шаг №1

Копируем файлы на сервер и подключаем таблицу стилей:

<link href="css/imageMenu.css" rel="stylesheet" type="text/css"/>

Шаг №2

Подключаем скрипт ImageTools и библиотеку Mootools:

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

Шаг №3

Вставляем следующий кусок кода перед закрытием BODY:

<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:40, duration:410});
});
</script>

Шаг №4

Теперь прописываем следующий HTML-код у себя на странице:

<div id="imageMenu">
<ul>
<li class="landscapes"><a href="#">Landscapes</a></li>
<li class="people"><a href="#">People</a></li>
<li class="nature"><a href="#">Nature</a></li>
<li class="urban"><a href="#">Urban</a></li>
<li class="abstract"><a href="#">Abstract</a></li>
</ul>
</div>

Параметры ImageMenu:

• openWidth - ширина открытого элемента
• border - рамка в пикселях для открытых элементов
• duration - продолжительность открытия элемента.
• transition - переход. По умолчанию: Fx.Transitions.quadOut
• onOpen - функция, которая будет выполняться для открытых элементов.
• onClose - функция, которая будет выполнять для закрытых элементов.

Данные элементы добавляются в код, который описан в третьем шаге. Например:

<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),

{openWidth:310, border:40, duration:410, onOpen:function(e, i){alert(e);}});
});
</script>

Получаем: длительность - 410, ширину - 310, а при щелчке на открытом элемента появится сообщение с адресом.