От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов 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 вы можете узнать из наших уроков или курса. Удачи!
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении
Узнать подробнее
В этом скрипте можно менять стили на нужные? Я прописываю нужные стили в своем css, а приоритет почему то у стилей скрипта.
Можно, конечно же. Переопределяющие стили обязательно должны идти ниже. Ну и, возможно, стоит удлинить цепочку селекторов в правиле, включая родителя. Если все равно не получится, тогда можно задать вопрос на нашем форуме, где можно дать ссылку на архив с кодом и уточнить — со стилизацией какого конкретно элемента возникает проблема.