Добавляем mega menu
Поговорим о современном виде выпадающего меню – mega menu. Данное меню позволяет web-мастеру вместо привычных пунктов (или вместе с ними) во время создания сайта выводить в выпадающем меню пункты подменю в несколько колонок, или даже любой произвольный html – будь то аннотации, товары или формы авторизации. Согласитесь, удобно? И практично?
В свое время как раз при обновлении одного из проектов встала задача внедрить подобное меню. Среди десятков страниц с описанием различных mega menu в Яндекс и Google был выявлен следующий факт: самих скриптов mega menu в свободном доступе много, написанных на jQuery или Mootools, но они либо второго уровня (без третьего и далее подуровней), либо стоят денег, или требуют невероятной доработки.
Но был найден вот такой удачный вариант: в виде скрипта DD Mega Menu (который пришлось буквально немного доработать, что получилось, смотрите в меню сайта Овертайм, наведите на пункты основного меню, чтобы увидеть анимированное подменю).
Плюсы и минусы DD Mega Menu
Достоинства:
- Написанный на jQuery код выпадающего меню весит всего 7 кбайт (и это в не сжатом состоянии, если сжать – не более 2 кбайт);
- Простой и чистый html и метод внедрения в контексте страницы;
- Неограниченное число вложенных уровней, неограниченное число количества меню, к которому можно добавить DD Mega Menu;
- Контейнеры меню могут содержать буквально любой html;
- Вы можете управлять как эффектом появления, так и временной задержкой перед появлением, исчезновением меню;
- Поддержка всех современных браузеров + старых версий IE 7+;
- Заявлена работа с мобильными и планшетными устройствами на Android, и от Apple;
- Распространяется совершенно бесплатно.
Недостатки:
- Есть один момент, который не понравился. Он явно заметен на сайте разработчика в приведенном примере. Если навести в любом из примеров: Example 1 – 3 на пункт Javascript V, а дальше на обозначенный галочкой справа пункт Free Javascripts, то выпадение следующего уровня меню происходит прямо под пунктом, а не справа от него, как мы уже давно привыкли видеть на всех сайтах.
Подключаем DD Mega menu на страницы сайта
Здесь все просто и без подводных камней. Первое, скачаем со страницы разработчика само меню и файл css к нему: ddmegamenu.js, ddmegamenu.css, разместим их в папке оформления нашего веб-сайта, например в папке /mega-menu. Второе, добавим внутри тега head подключение jQuery и скрипта DD Mega Menu:
<link rel="stylesheet" type="text/css" href="/mega-menu/ddmegamenu.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="/mega-menu/ddmegamenu.js"></script>
<script type="text/javascript">
//<!--
jQuery(window).load(function(){
ddmegamenu.docinit({
menuid:'solidmenu',
dur:200 //<--no comma after last setting
})
});
//-->
</script>
Третье, добавим нужную разметку для нашего меню в теле страницы между тегами <body> и </body> в нужном месте при верстке сайта:
<ul id="solidmenu" class="solidblockmenu">
<li><a href="http://www.javascriptkit.com" rel="id-container-dlya-punkta-menu-1">Первый пункт меню</a></li>
<li><a href="http://www.cssdrive.com" rel=" id-container-dlya-punkta-menu -2">Второй пункт меню </a></li>
</ul>
<!--First mega menu (1) -->
<div id="id-container-dlya-punkta-menu-1" class="mega solidblocktheme">
<div class="column">
<p>Здесь будет содержимое, которое будет появляться при наведении на Первый пункт меню</p>
<ul>
<li><a href="#" rel=" id-container-dlya-punkta-menu-3">Пункт выпадающего меню</a></li>
<li><a href="#">Подпункт 2</a></li>
<li><a href="#">Подпункт 3</a></li>
</ul>
</div>
</div>
<!--Second mega menu (1.1) -->
<div id="id-container-dlya-punkta-menu-3" class="mega solidblocktheme" style="width:150px">
<div class="column">
<p>Здесь будет третий подуровень меню, который становится активным при наведении на ссылку
Пункт выпадающего меню </p>
<ul>
<li><a href="#">Подпункт 4</a></li>
<li><a href="#"> Подпункт 5</a></li>
<li><a href="#"> Подпункт 6</a></li>
</ul>
</div>
</div>
<!--Forth mega menu (2) -->
<div id="id-container-dlya-punkta-menu-2" class="mega solidblocktheme">
<div class="column">
<p>Здесь будет содержимое выпадающего меню, активное при наведении на ссылку Второй пункт меню</p>
<form action="" method="post">
<p><label for="login">Логин</label><input type="text" id="login" name="login" /></p>
<p><label for="password">Пароль</label><input type="password" id=" password " name=" password " /></p>
<p><input type="submit" value="Войти" /></p>
</form>
</div>
</div>
Пояснения к примеру:
- После загрузки страницы инициализируется наше подменю:
ddmegamenu.docinit({ menuid:'solidmenu', dur:200 //<--no comma after last setting })Примечание автора: после последнего javascript параметра в настройках меню не указывайте запятую перед закрывающейся скобкой }, это вызовет ошибку в IE7.
Которое прикрепляется к основному меню с id=»solidmenu» (указываете id Вашего меню в параметре menuid без знака #) .
- В контексте страницы должно быть уже сформировано меню с id=»solidmenu» и пункты выпадающего подменю, которые находятся за/перед id=»solidmenu» (но ни в коем случае html пунктов не располагать внутри самого главного меню!). Подпункты формируем так: произвольный html, который нам нужен, заключаем в конструкцию:
<div id="id-container-dlya-punkta-menu-1" class="mega solidblocktheme"> … произвольный html выпадающего пункта меню </div>
Обязательно задаем для контейнера подменю уникальный id, который указываем в атрибуте rel для ссылки меню, по наведению на которую мы хотим увидеть этот пункт меню и класс class=»mega».
Класс solidblocktheme указывает только лишь тему оформления из подготовленных разработчиком, которая будет применяться при оформлении выпадающего подменю.
В нашем примере мы связываем пункт основного меню с выпадающим пунктом меню с div id id-container-dlya-punkta-menu-1 (id элемента, который будет появляться при наведении на ссылку, указываем в атрибуте rel ссылки) который как раз и появится при наведении на ссылку Первый пункт меню.
<a href="http://www.javascriptkit.com" rel="id-container-dlya-punkta-menu-1">Первый пункт меню</a>
Далее мы связываем с подпунктом выпадающего меню с div id id-container-dlya-punkta-menu-2.
<a href="http://www.cssdrive.com" rel=" id-container-dlya-punkta-menu -2">Второй пункт меню </a>
Как видите, выпадающее подменю может содержать буквально любой произвольный html, а не только пункты подменю. Чтобы реализовать выпадающее меню уровня три в выпадающем меню уровня два, достаточно тоже просто придерживаться этих правил. Берем ссылку в выпадающем меню уровня 2:
<a href="#" rel=" id-container-dlya-punkta-menu-3">Пункт выпадающего меню</a>
И оформляем перед/после (вне) контейнера выпадающего меню уровня 2 контейнер выпадающего меню уровня 3 с id=»id-container-dlya-punkta-menu-3″ и классом class=»mega»
<div id="id-container-dlya-punkta-menu-3" class="mega solidblocktheme" style="width:150px"> ….. html внутри выпадающего пункта меню уровня 3 </div>
После чего id id-container-dlya-punkta-menu-3 задаем для атрибута rel ссылки Пункт выпадающего меню.
Теперь при наведении в выпадающем меню уровня 2 на ссылку Пункт выпадающего меню у нас будет под ней отображен третий уровень меню: html, содержащийся в контейнере div id-container-dlya-punkta-menu-3.
Как видите, DD Mega Menu позволяет создавать mega menu неограниченной вложенности, используя вместе с привычными нам уровнями и пунктами меню произвольный html, и позволяет внедрять в меню любые элементы.
Будь то презентация товаров, или новости, или формы поиска, авторизации и многого другого, ограничивая программиста и web-мастера только рамками собственной фантазии и пожеланиями заказчика.
Javascript настройки DD Mega Menu
Функция инициализации меню ddmegamenu.docinit() принимает следующие опции:
- menuid – обязательный параметр, id меню, для которого будет сформировано выпадающее подменю (инициализируется скрипт DD Mega Menu), указывается без #
- easing – необязательный параметр, по умолчанию easeInOutSine, эффект появления меню, может принимать значения: easeInOutSine (пример первый на сайте разработчика), easeInOutCirc (пример третий на сайте разработчика), easeInQuad,easeOutBack (пример второй на сайте разработчика).
- trigger – необязательный параметр, по умолчанию mouseover, когда будет появляться меню, по наведению мыши: mouseover, или по щелчку click.
- dur – необязательный параметр, по умолчанию 500 мск, время, за которое будет происходить эффект появления меню, задается в миллисекундах.
- hidedelay – необязательный параметр, по умолчанию 200 мск, время, через которое будет свернуто выпадающее подменю, если посетитель убрал мышку из его области, задается в миллисекундах.
CSS стили DD Mega Menu
По умолчанию все настройки css сводятся к настройке отображения div с class=»mega», который должен быть абсолютно позиционирован и скрыт, также желательно задать ширину пункта выпадающего подменю:
.mega{
position: absolute;
visibility: hidden;
}
Все остальные настройки css Вы можете менять на Ваш вкус.