Добавляем mega menu

Добавляем 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.jsddmegamenu.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>

Пояснения к примеру:

  1. После загрузки страницы инициализируется наше подменю:
    ddmegamenu.docinit({
                    menuid:'solidmenu',
                    dur:200 //<--no comma after last setting
    })
    

    Примечание автора: после последнего javascript параметра в настройках меню не указывайте запятую перед закрывающейся скобкой }, это вызовет ошибку в IE7.

    Которое прикрепляется к основному меню с id=»solidmenu» (указываете id Вашего меню в параметре menuid без знака #) .

  2. В контексте страницы должно быть уже сформировано меню с 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 Вы можете менять на Ваш вкус.

Комментарии
Adblock detector