Топ плагинов jQuery. Плагин megamenu-js

Топ плагинов jQuery. Плагин megamenu-js

От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня у нас плагин, позволяющий реализовать так называемое мега-меню (mega menu). Речь идет о выпадающем меню, где вложенное меню может включать в себя множество пунктов, разбитых на колонки.

На мой взгляд, меню — это один из наиболее ответственных элементов на сайте. Благодаря продуманному и хорошо реализованному меню пользователю удобно пользоваться сайтом. Ну а если меню реализовано еще и красиво, если для него реализованы какие-либо эффекты — это безусловно понравится посетителям сайта. В нашем сегодняшнем меню можно вместить много пунктов, именно поэтому оно и называется — mega menu (мега меню).

На странице GitHub плагина megamenu-js мы можем скачать исходники плагина а также познакомиться с небольшой инструкцией по его установке и примеры создания megamenu. Скачаем и подключим плагин.

<link href="css/style.css" rel="stylesheet">
<link href="css/ionicons.min.css" rel="stylesheet">
<script src="js/megamenu.js"></script>

Теперь нам потребуется верстка для организации мега меню. Это стандартная типовая верстка меню списками, примерно такая:

<div class="menu-container">
 <div class="menu">
 <ul>
 <li></li>
 <li>
 <ul>
 <li></li>
 <li></li>
 </ul>
 </li>
 </ul>
 </div>
</div>

Собственно, это все. Без подключения файлов стилей и файла самого плагина наше меню выглядит примерно так:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Топ плагинов jQuery. Плагин megamenu-js

А вот с подключенными файлами плагина megamenu-js — меню кардинально меняется и выглядит уже очень достойно. Вот так выглядит меню в раскрытом состоянии при наведении на родительский пункт меню:

Топ плагинов jQuery. Плагин megamenu-js

Ну и, конечно же, меню адаптивно, куда же сейчас без этого. При уменьшении ширины окна браузера меню будет замечательно адаптироваться.

Топ плагинов jQuery. Плагин megamenu-js

Отличное меню получилось, мне нравится. На этом у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree