Создание меню при помощи 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(); 
});