От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня у нас плагин, позволяющий реализовать так называемое мега-меню (mega menu). Речь идет о выпадающем меню, где вложенное меню может включать в себя множество пунктов, разбитых на колонки.
На мой взгляд, меню — это один из наиболее ответственных элементов на сайте. Благодаря продуманному и хорошо реализованному меню пользователю удобно пользоваться сайтом. Ну а если меню реализовано еще и красиво, если для него реализованы какие-либо эффекты — это безусловно понравится посетителям сайта. В нашем сегодняшнем меню можно вместить много пунктов, именно поэтому оно и называется — mega menu (мега меню).
На странице GitHub плагина megamenu-js мы можем скачать исходники плагина а также познакомиться с небольшой инструкцией по его установке и примеры создания megamenu. Скачаем и подключим плагин.
|
1 2 3 |
<link href="css/style.css" rel="stylesheet"> <link href="css/ionicons.min.css" rel="stylesheet"> <script src="js/megamenu.js"></script> |
Теперь нам потребуется верстка для организации мега меню. Это стандартная типовая верстка меню списками, примерно такая:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="menu-container"> <div class="menu"> <ul> <li></li> <li> <ul> <li></li> <li></li> </ul> </li> </ul> </div> </div> |
Собственно, это все. Без подключения файлов стилей и файла самого плагина наше меню выглядит примерно так:
А вот с подключенными файлами плагина megamenu-js — меню кардинально меняется и выглядит уже очень достойно. Вот так выглядит меню в раскрытом состоянии при наведении на родительский пункт меню:
Ну и, конечно же, меню адаптивно, куда же сейчас без этого. При уменьшении ширины окна браузера меню будет замечательно адаптироваться.
Отличное меню получилось, мне нравится. На этом у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
Комментарии (2)