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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

Метки:

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

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

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

Комментарии (2)

  1. Владислав

    В этом скрипте можно менять стили на нужные? Я прописываю нужные стили в своем css, а приоритет почему то у стилей скрипта.

    • Андрей

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree