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

02 января 2009 года
Mootools

Содержание

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

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

Особенности

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

Требования

Сайт, где Вы можете вставить скрипт. Если Вы не являетесь вебмастером, отправьте ему ссылку на эту страницу и попросите сделать это за Вас.
Правильный неупорядоченных список. "Валидность" определяется стандартом строгого doctype.
Mootools 1.2. Если Вы используете другие JavaScript-фреймоворки, к примеру, Prototype или JQuery, или более раннюю версию Mootools, Вам придется от них отказаться, иначе меню работать не будет.
Если Ваш сайт уже использует 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

Теги: скачать вертикальное выпадающее меню для ie7, многоуровневое меню, вертикальное меню с подменю, многоуровневое выпадающее меню, вертикальное выпадающее меню jquery, вертикальное многоуровневое меню, многоуровневое вертикальное меню jquery

Создание тени средствами JavaScript Mootools 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; Ответить


	K_E_V_in написал 25 ноября 2010 года Меню в хроме работает некорректно! Отображается только первый элемент вложенного подменю! Ответить


	Александр написал 25 ноября 2010 года Возьмите версию сайта-источника (ссылка в конце статьи) Ответить


	Леонид написал 24 января 2011 года Здравствуйте! А может поможете новичку? Пробовал и так и сяк, а все никак не получается. менюшка не выводится?!? Ответить


	Александр написал 25 января 2011 года Вы пользуетесь FireBug'ом? Какая ошибка? Какие версии фреймворка и скрипта используете? Ответить


	Алексей написал 24 августа 2011 года Здравствуйте! При использовании броузера Google Chrome версии 13.0.782.215 в подменю 2-го уровня виден только первый элемент. Хотя в броузерах IE8 и FF версии 3.6.6 подменю раскрывается корректно. Такая ошибка проявляется и на демо-версии меню с сайта-источника, и на Вашем меню http://demo.vkurseweba.ru/mootools/dropdownmenuvertical/. Броузер никак не ругается, просто не показывает остальные пункты подменю. Помогите, пожалуйста, заставить меню работать корректно в GChrome! Ответить


	Сергей написал 01 сентября 2011 года такая же проблема с хромом, и на сайте разработчика также, есть решение? или нужно искать другое меню.. Ответить


	Александр написал 13 декабря 2011 года Респек то что искал а то уже замучасли Ответить


	Владимир написал 12 января 2012 года Всем привет, такая же проблема с хромом и фаерфоксом но только под линуксом, а под виндой хром отображает код нормально, есть решение? Наперед спасибо за ответ Ответить

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

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

Особенности

Требования

Установка

Параметры

Готово

UPDATE

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

Комментарии

Популярные статьи

Последние записи

Разделы

@bekbulatov

Бекбулатов Александр

web-разработчик

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

Особенности

Требования

Установка

Параметры

Готово

UPDATE

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

Комментарии

Популярные статьи

Последние записи

Разделы

@bekbulatov