В свое время как раз при обновлении одного из проектов встала задача внедрить подобное меню. Среди десятков страниц с описанием различных 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, то выпадение следующего уровня меню происходит прямо под пунктом, а не справа от него, как мы уже давно привыкли видеть на всех сайтах. Этот единственный недостаток был устранен при внедрении меню на сайт Overtime (см. пример, если навести на: Статистика – Футбол – Украинский Футбол), там следующий подуровень появляется справа, и моя модификация меню будет прикреплена в конце статьи. Также была подправлена и немного изменена анимация самого выпадающего меню (мой вариант корректно работает с overflow: visible для родительского и дочерних контейнеров меню). Скачать мой вариант Вы можете по этой ссылке или в конце статьи по ссылке Скачать файл

   Кстати, если Вы интересуетесь раскруткой, советую Вам обратить внимание на сайт http://seouniver.ru/.

Подключаем 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>

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

  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 указывает только лишь тему оформления из подготовленных разработчиком, которая будет применяться при оформлении выпадающего подменю.

   В нашем примере мы связываем пункт основного меню

<a href="http://www.javascriptkit.com" rel="id-container-dlya-punkta-menu-1">Первый пункт меню</a>

с выпадающим пунктом меню с div id id-container-dlya-punkta-menu-1 (id элемента, который будет появляться при наведении на ссылку, указываем в атрибуте rel ссылки) который как раз и появится при наведении на ссылку Первый пункт меню.

Далее мы связываем

<a href="http://www.cssdrive.com" rel=" id-container-dlya-punkta-menu -2">Второй пункт меню </a>

   с подпунктом выпадающего меню с div id id-container-dlya-punkta-menu-2.

Как видите, выпадающее подменю может содержать буквально любой произвольный 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 Вы можете менять на Ваш вкус.

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Скачать файл:

    Notice: Undefined variable: gallery_on in /home/www/awesome/data/www/awesome-design.com/templates/beez/html/com_k2/templates/default/item.php on line 73
  • mega menu мой вариант (270 загрузок)

Комментарии   

 
0 #1 Nika 13.03.2013 12:46
Как раз искала возможность реализовать подобное на своем сайте, спасибо за подробное изложение :-)
Цитировать
 

Добавить комментарий


Яндекс.Метрика