Многоуровневое выпадающее меню

02 января 2009 года
Mootools
  • Содержание

Простое многоуровневое выпадающее меню, основанное на неупорядоченных списках <ul>, построено на JavaScript-фреймоворке Mootools.

Горизонтальные меню очень удобны, так как они занимают мало места, однако количество элементов ограничено шириной страницы. Выпадающие меню позволяют сгруппировать многие элементы, используя подменю. При этом главное меню отображается горизонтально, а подменю - под соответствующим элементом. Подменю также можно заставить раскрываться, однако увлекаться этим не стоит. Пользователю будет трудно добраться до нужного раздела.

Особенности

  1. Не требуют знаний JavaScript. Просто вызываем скрипт, указав идентификатор списка, который будет преобразован в выпадающее меню.
  2. HTML-структура. Изменяя элементы списка, мы изменяем элементы меню. Достаточно просто выделить элемент, вырезать или скопировать и вставить в требуемое место.
  3. Индексация. У поисковых роботов не возникнет проблем с индексацией Вашего сайта.
  4. Совместимо с популярными браузерами Firefox 2 & 3, Internet Explorer 6 & 7, Opera 9, Safari 3 в ОС Windows. Сообщите мне, если обнаружите проблемы связанные с работой скрипта в других браузерах и операционных системах.
  5. Настройка меню осуществляется стилями CSS.
  6. Анимация. Меню сделает Ваш сайт заметным, более профессиональным.

Требования

  1. Сайт, где Вы можете вставить скрипт. Если Вы не являетесь вебмастером, отправьте ему ссылку на эту страницу и попросите сделать это за Вас.
  2. Правильный неупорядоченных список. "Валидность" определяется стандартом строгого doctype.
  3. Mootools 1.2. Если Вы используете другие JavaScript-фреймоворки, к примеру, Prototype или JQuery, или более раннюю версию Mootools, Вам придется от них отказаться, иначе меню работать не будет.
  4. Если Ваш сайт уже использует Mootools, убедитесь что он содержит следующие классы:
  • Core (Core, Browser)
  • Native (Array, Function, Number, String, Hash, Event)
  • Class (Class, Class.Extra)
  • Element (Element, Element.Event, Element.Style, Element.Dimensions)
  • Utilities (Selectors, DomReady)
  • Fx (Fx)
  • Plugins (Fx.Element)

Если Вы используете нестандартный способ перемещения меню, Вам необходим класс Fx.Transitions.

Установка

var myMenu = new UvumiDropdown(menuId,options);

Параметры

  • menuId - идентификатор <ul> элемента, который будет преобразован в меню. Если указать идентификатор другого элемента, в меню преобразуется первый дочерний элемент <ul>.
  • options позволяет настроить меню по вкусу:
  • duration - длительность анимационного эффекта, в миллисекундах. По умолчанию 250.
  • transition - способ выдвижения меню. По умолчанию Fx.Transitions.linear. Другие варианты рассмотрим позже.

Вставьте следующий код в заголовок документа:

<head>
	<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-dropdown.css"/>
	<script type="text/javascript" src="js/mootools-for-dropdown.js"> </script>
	<script type="text/javascript" src="js/UvumiDropdown.js"> </script>
</head>

Затем добавьте в документ неупорядоченный список <ul>. Обратите внимание, он должен содержать стили css, определенные в классе dropdown.

<ul class="dropdown" id="dropdown-menu">
	<li><a href="home.html">Home</a></li>
	<li><a href="order.html">Order</a></li>
	<li><a href="tools.html">Tools</a></li>
	<li><a href="stats.html">Stats</a></li>
</ul>

Преобразуем список в меню.

var myMenu = new UvumiDropdown("dropdown-menu");

Мы получили примерно такой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
	<head>
		<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-dropdown.css"/>
		<script type="text/javascript" src="js/mootools-for-dropdown.js"> </script>
		<script type="text/javascript" src="js/UvumiDropdown.js"></script>
		<script type="text/javascript">var myMenu = new UvumiDropdown("dropdown-menu");</script>
	</head>
	<body>
		<ul id="dropdown-menu" class="dropdown">
			<li><a href="home.html">Home</a></li>
			<li><a href="order.html">Order</a></li>
			<li><a href="tools.html">Tools</a></li>
			<li><a href="stats.html">Stats</a></li>
		</ul>
	</body>
</html>

Дополним элемент меню Tools раскрывающимся вертикальным подменю. Для этого добавим список <ul> внутри тега <li>.

<ul id="dropdown-menu" class="dropdown" >
	<li><a href="home.html">Home</a></li>
	<li><a href="order.html">Order</a></li>
	<li>
		<a href="tools.html">Tools</a>
		<ul>
			<li><a href="tools1.html">Tools 1</a></li>
			<li><a href="tools2.html">Tools 2</a></li>
			<li><a href="tools3.html">Tools 3</a></li>
			<li><a href="tools4.html">Tools 4</a></li>
		</ul>
	</li>
	<li><a href="stats.html">Stats</a></li>
</ul>

Аналогичным образом можно заставить раскрываться элемент вертикального подменю.

<ul id="dropdown-menu" class="dropdown">
	<li><a href="home.html">Home</a></li>
	<li><a href="order.html">Order</a></li>
	<li>
		<a href="tools.html">Tools</a>
		<ul>
			<li>
				<a href="category1.html">Category 1</a>
				<ul>
					<li><a href="tool1.html">Tool 1</a></li>
					<li><a href="tool2.html">Tool 2</a></li>
					<li><a href="tool3.html">Tool 3</a></li>
					<li><a href="tool4.html">Tool 4</a></li>
				</ul>
			</li>
			<li>
				<a href="category2.html">Category 2</a>
				<!— Сюда вы можете добавить подразделы меню для Category 2 —>
			</li>
			<li><a href="category3.html">Category 3</a></li>
			<li><a href="category4.html">Category 4</a></li>
		</ul>
	</li>
	<li><a href="stats.html">Stats</a></li>
</ul>

Готово

Вы можете настроить меню по вкусу, изменив опции меню. К примеру, 

var myMenu = new UvumiDropdown("dropdown-menu",{
	duration: 500, //по умолчанию 250ms
	transition: Fx.Transitions.Bounce.easeOut //по умолчанию Fx.Transitions.linear, необходим класс Fx.Transitions
});

Подробную информацию о Fx.Transitions вы можете найти на сайте Mootools.

Широкие элементы меню и чрезмерная ветвистость могут привести к тому, что оно не будет умещаться на экране монитора. Поэтому правильно группируйте элементы меню.

Посмотреть и скачать примеры вы можете на сайте источника.

UPDATE

Пример вертикального меню. Скачать.

Понравилась статья? Подпишись на RSS.

Советую почитать:

Плавная смена фона
MooTools 1.2.3 - Релиз
Slidemenu и Mootools

Теги: mootools выпадающее меню, выпадающее меню

Создание тени средствами JavaScriptMootools WYSIWYM редактор

Комментарии

  • virua написал 16 января 2009 года

    Действительно хорошая реализация выпадающего меню на MooTools. Да и на сайте его разработчиков (http://uvumi.com/) еще куча хороших вещей для MooTools юзеров.

    Ответить
  • Алексей написал 21 января 2009 года

    Пробывал переделать в вертикальное. Смешно смотрится = )

    Ответить
  • Александр написал 25 января 2009 года

    Алексей, немного изменил класс для вертикального меню. Можете пользоваться

    Ответить
  • Алексей написал 26 января 2009 года

    Спасибо! а то у меня что-то не получалось!

    Ответить
  • Александр написал 18 ноября 2009 года

    Плагин Fx.Element отсутствует в MooTools Core и More 1.2.4. При необходимости его можно взять с примера и подключить самому.

    Ответить
  • Shustry написал 28 июня 2010 года

    Скрипт хороший, но, имхо, для 100%-й готовности к исепользованию надо бы в ксс примера прописать и вариант на чистом ксс в ноускрипте (т.е. без эффектов).
    p.s. Оффтоп: в форме добавления комментов, возможно, стоит прописать автодобавление префикса 

    http://

    , а то только с третьего раза допёр :)

    Ответить
  • webkozel написал 10 июля 2010 года

    У вас элемент <li> добавляется в конец меню. Для него, наверное, чтобы совсем скрыть будет верным дописать ещё 2 свойства:
    overflow:hidden;
    border:0;

    Ответить