Главная » Полезные статьи » Язык JavaScript » Javascript: Графическое меню на MooTools
Распечатать статью

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

Красивое элегантное меню-аккордеон на javascript для сайта. Использует Mootools.

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

javascript графическое меню mootools

Посмотреть её в работе можно на главной странице loco.ru

Скачать файлы — здесь

 

Шаг №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, а при щелчке на открытом элемента появится сообщение с адресом.

Источник:  loco.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи