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

26

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

На мій погляд, меню — це один з найбільш відповідальних елементів на сайті. Завдяки продуманому і добре реалізованому меню користувачеві зручно користуватися сайтом. Ну а якщо меню реалізовано ще й красиво, якщо для нього реалізовані якісь ефекти — це безумовно сподобається відвідувачам сайту. У нашому сьогоднішньому меню можна вмістити багато пунктів, саме тому воно і називається — mega menu (мега меню).

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

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

Власне, це все. Без підключення файлів стилів і файлу самого плагіна наше меню виглядає приблизно так:

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

А ось з приєднаними файлами плагіна megamenu-js — меню кардинально змінюється і виглядає вже дуже гідно. Ось так виглядає меню в розкритому стані при наведенні на батьківський пункт меню:

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

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

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

Відмінне меню вийшло, мені подобається. На цьому у мене все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!