Создание меню при помощи MenuMatic 0.68.3

MenuMatic – это класс MooTools 1.2, который преобразовывает нумерованный или ненумерованный список ссылок в динамическое выпадающее меню. Для пользователей, у которых JavaScript отключен, данный скрипт работает на системе меню CSS, основанной на разработанной Мэтью Кэрроллом разновидности Suckerfish Dropdowns (авторы Patrick Griffiths и Dan Webb). Данная разновидность предоставляет возможность управлять меню клавиатурой.

demosourse

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.

^ Наверх ^