- Метки урока:
- меню
- mootools
- web дизайн
Создание меню при помощи MenuMatic 0.68.3
MenuMatic – это класс MooTools 1.2, который преобразовывает нумерованный или ненумерованный список ссылок в динамическое выпадающее меню. Для пользователей, у которых JavaScript отключен, данный скрипт работает на системе меню CSS, основанной на разработанной Мэтью Кэрроллом разновидности Suckerfish Dropdowns (авторы Patrick Griffiths и Dan Webb). Данная разновидность предоставляет возможность управлять меню клавиатурой.
Html:
<link rel="stylesheet" href="css/MenuMatic.css" type="text/css" media="all" /> ... <ul id="nav"> <li><a href="#" >Ссылка 1</a></li> <li><a href="#" >Ссылка 2</a> <ul> <li><a href="#" >Ссылка 3</a></li> <li><a href="#" >Ссылка 4</a></li> </ul> </li> <li><a href="#" >Ссылка 5</a></li> </ul> ... <script type="text/javascript" src="http://www.google.com/jsapi" ></script> <script type="text/javascript" > google.load("mootools", "1.2.1"); </script> <script type="text/javascript" src="js/MenuMatic_0.68.3.js" ></script>
JavaScript:
var myMenu = new MenuMatic({/* параметры */})
Основные параметры:
- id [string]: идентификатор главного элемента ul или ol. По умолчанию = "nav";
- subMenusContainerId [string]: идентификатор блока (div), в котором содержатся подменю. По умолчанию = "subMenusContainer".
Параметры подменю:
- effect [string]: определяет текущий эффект, если он есть. Возможные эффекты: "slide", "fade" и "slide & fade". По умолчанию = "slide & fade";
- duration [number]: продолжительность эффекта в миллисекундах. По умолчанию = 600;
- physics [object]: определяет поведение эффекта. По умолчанию = "Fx.Transitions.Pow.easeOut";
- hideDelay [number]: время (в миллисекундах), в течение которого меню исчезает после отведения курсора мыши. По умолчанию = 1000.
Параметры отображения:
- stretchMainMenu [boolean]: если установлен в true, ширина ссылок главного меню (заданная стилем CSS) будет растянута до ширины элемента-родителя ul или ol. По умолчанию = false;
- matchWidthMode [boolean]: если true, ширина первых подменю станет такой же, как у их кнопки-родителя, в случае если они уже не шире ее;
- orientation [string]: ориентация главного меню, может принимать значения "horizontal" и "vertical". По умолчанию = "horizontal";
- center [boolean]: если true, меню располагается по центру. По умолчанию = false;
direction [object]- x [string]: определяет направление появления подменю из ссылок главного меню. Как значение "left", так и "right", будут переопределяться, если подменю выходит за рамки окна просмотра. По умолчанию = "left";
- y [string]: определяет направление появления подменю из ссылок главного меню. Принимает значение "up" или "down". По умолчанию = "down";
- tweakInitial [object]
- x [string]: генерирует расположение начальных подменю. По умолчанию = 0;
- y [string]: генерирует расположение начальных подменю. По умолчанию = 0;
- tweakSubsequent [object]
- x [string]: генерирует расположение последующих подменю. По умолчанию = 0;
- y [string]: генерирует расположение последующих подменю. По умолчанию = 0.
Параметры динамичности стиля:
- opacity [number]: непрозрачность подменю. По умолчанию = 95;
- killDivider [string]: если установлен в "first", первый разделитель в главном меню удаляется. Если "last", то удаляется последний. (Разделитель представляет собой фоновое изображение элементов li);
- fixHasLayoutBug [boolean]: если установлен в "true", то попытается исправить ошибку Microsoft «hasLayout». По умолчанию = "false".
Функции обратного вызова:
- onHideAllSubMenusNow_begin
- onHideAllSubMenusNow_complete
- onInit_begin
- onInit_complete
- onSubMenuInit_begin(subMenuClass)
- onSubMenuInit_complete(subMenuClass)
- onMatchWidth_begin(subMenuClass)
- onMatchWidth_complete(subMenuClass)
- onHideSubMenu_begin(subMenuClass)
- onHideSubMenu_complete(subMenuClass)
- onHideOtherSubMenus_begin(subMenuClass)
- onHideOtherSubMenus_complete(subMenuClass)
- onHideAllSubMenus_begin(subMenuClass)
- onHideAllSubMenus_complete(subMenuClass)
- onPositionSubMenu_begin(subMenuClass)
- onPositionSubMenu_complete(subMenuClass)
- onShowSubMenu_begin(subMenuClass)
- onShowSubMenu_complete(subMenuClass)
Пример использования функции обратного вызова:
var myMenu = new MenuMatic({ onPositionSubMenu_begin:function(classRef){ alert(classRef.btn.get("html")); /* выводит сообщение с текстом кнопки, подменю которой открывается в данный момент */ } });
Примечания:
Требование: MooTools 1.2 Core.
Совместимость: все веб-браузеры класса А*
(*Выпадающее меню не работает в браузере Internet Explorer 6 с отключенным JavaScript. Нет никакой возможности получить выпадающее меню из нумерованного/ненумерованного списка ссылок в IE6 без JavaScript.)
Создание экземпляра класса MenuMatic должно запускаться после полной загрузки страницы.
window.addEvent('domready', function() { var myMenu = new MenuMatic(); });
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.greengeckodesign.com/menumatic
Перевел: Станислав Протасевич
Урок создан: 14 Декабря 2010
Просмотров: 60284
Правила перепечатки
5 последних уроков рубрики "Mootools"
-
Анимированные закладки с использованием MooTools
Один из возможных способов поместить много контента на одно небольшое место - это использование системы закладок. Данный урок покажет как создать систему анимированных закладок с использованием CSS, куки и анимированного переключения панелей.
-
Выезжающая панель для сайта на Mootools
Изучив этот урок, Вы научитесь делать компактную выплывающую панель для сайта. Разрабатывать ее мы будем с помощью Mootools, ну и конечно же не обойдемся и без CSS-стилей, которые будут играть здесь роль дизайнинга панели
-
Увеличение / Уменьшение текстовых полей с помощью MooTools
Короткий урок про то, как добавить к любому текстовому полю возможность увеличения или уменьшения.
-
Multi-Select c помощью MooTools
В этом уроке речь пойдет о переносе выбранных опций из одного multi-select в другой. Думаю, что подобный виджет вы уже видели. Обычно он применяется на сайтах объявлений и регистрации в каталогах, где ваше объявление (ваш сайт) подходит для размещения в нескольких рубриках. В этом уроке мы реализуем подобный виджет с помощью Mootools.
-
Автоматическая подпись изображений с помощью MooTools
Этот урок расскажет Вам про то, как сделать автоматическую подпись под рисунком с помощью MooTools.