Як зробити для wordpress меню, що випадає

Вітаю вас на сайті Impuls-Web!

Ще це може бути корисно, якщо у вас виникла необхідність зробити дублюючі меню, наприклад, внизу сторінки.

Навігація по статті:

Для WordPress меню, що випадає нам допоможе зробити плагін Mega Main Menu. Це дуже потужний плагін, за допомогою якого ви можете створити випадає горизонтальне і вертикальне меню абсолютно в будь-якій частині вашого сайту.

Установка і настройка плагіна меню, що випадає WordPress

Отже, для створення меню, що випадає WordPress нам для початку потрібно встановити плагін Mega Main Menu зі сховищ.

1. 1. Заходимо в адмінку WordPress і переходимо в розділ «Модулі» => «Додати новий».
2. 2. У рядок пошуку вставляємо назву, чекаємо, поки пройде пошук, в результатах пошуку вибираємо потрібний нам плагін і тиснемо на кнопку «Встановити». а потім «Активувати».

3. Далі, нам потрібно перейти в розділ «Зовнішній вигляд» => «Меню» і тут створити нове, або вибрати вже існуючий меню, яке ми хочемо зробити випадає. Для наочності і економії часу я заздалегідь зробила заготовку, яке має в розділі «Каталог» два рівня вкладеності.

4. Для початку роботи з плагіном нам потрібно включити його в лівій панелі управління, в розділі «Налаштування Max Mega Menu»

5. Тут же ми можемо в графі «Подія» вибрати, при яких діях користувача буде відкриватися пункти меню.

Доступно для вибору три варіанти:

Hover intent - те ж саме, що і «Наведення мишки»

Наведення мишки - відкривається при наведенні покажчика мишки на пункті

Клік мишки - відкривається при кліці покажчиком мишки по пункту

6. У графі «Ефект» ми можемо вибрати ефект при відкритті меню, що випадає WordPress

І швидкість, з якою воно буде відкриватися:

7. Далі, при наведенні покажчика мишки на пункт меню, біля його назви з'являється синя кнопка «Мега Меню». натиснувши на яку ми відкриємо вікно налаштувань для даного пункту.

8. У вкладці вікна "Мега Меню» ми можемо:

• У розділі «Режим відображення» вибрати спосіб розташування елементів. Якщо ми виберемо пункт «Меню, що випадає». то в результаті ми отримаємо стандартне меню, що випадає WordPress, де пункти будуть відкриватися при наведенні на них покажчика мишки, або кліці по ним.

Якщо ж ми виберемо пункт «Мега Меню» то в розкривається області підпункти будуть розташовуватися в стовпчик:

У списку, який розташований поруч з налаштуванням режиму відображення ми можемо вибрати і додати в відкривається область будь-який з доступних віджетів

У наступному списку ми можемо змінити кількість стовпців, в яких будуть розташовуватися наші пункти і додані віджети.

9. На вкладці «Settings» ви можете приховати напис або стрілку, відключити посилання, відключити відображення елемента на мобільних пристроях або комп'ютерах, задати налаштування вирівнювання для самого елемента, іконки і підміню, а так само можна відключити відображення підміню на мобільних пристроях.

10. На наступній вкладці ми можемо поставити іконку для пункту меню.

У безкоштовної версії плагіна доступні для використання тільки стандартні іконки. Іконки Font Awesome, Genericons і можливість додавання своїх іконок доступна тільки для Pro-версії.

11. Далі нам потрібно перейти в розділ «Мега Меню» на головній сторінці WordPress. Тут нам потрібні дві вкладки: «Теми меню» і «Локації меню»

12. На вкладці «Теми меню» нам потрібно задати тему колірного оформлення для нашого меню, що випадає WordPress, так як в цьому плагіні немає стандартних заготовок.

Перемикаючись по вкладках розділу вам потрібно задати налаштування кольору, відступи, висоту, шрифти, рамки, тіні і інші візуальні настройки відповідно до колірним оформленням вашого сайту. Після того, як ви задасте всі настройки, не забудьте натиснути на кнопку «Зберегти зміни».

Додавання меню, що випадає WordPress на сайт

Після того як ми закінчили настройку меню, що випадає WordPress, нам потрібно його якось додати на сайт. У разі, якщо ми використовуємо дане меню в якості головного, то тут все просто, нічого міняти або додавати не потрібно, все настройки застосовуються за замовчуванням.

Для додавання меню, що випадає WordPress в область віджетів нам потрібно:

1. 1. Переходимо в розділ «Зовнішній вигляд» => «Віджети»
2. 2. Вибираємо віджет «Max Mega Menu» і додаємо його в сайдбар. Це можна зробити або шляхом перетягування віджета в потрібну область, або вибравши віджет і клікнувши на кнопку «Додати віджет».

3. А далі нам потрібно стилями привести наше меню до потрібного вигляду, так як за замовчуванням воно відображається як горизонтальне.

Якщо ж вам потрібно зробити дублюючі меню, що випадає WordPress в футере сайту, то для цього потрібно:

1. 1. Переходимо на вкладку «Локації меню» в настройках плагіна і копіюємо php-функцію:

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

4. Після чого зберігаємо файл і вивантажуємо його на хостинг, нажив на дискетку або сполучення клавіш CTRL + S.

Ось що у нас вийшло:

Тепер у нас головне меню сайту продубльовано в футере. Залишилося його трохи підправити css-стилями.

Як я вже говорила, плагін Max Mega Menu дає величезні можливості, і з його допомогою ви можете створити для WordPress меню, що випадає будь-якої складності, будь-горизонтально, хоч вертикальне, і вставити його в будь-якому місці на своєму сайті. Але, на жаль, у цього плагіна є і недоліки, основним з яких є необхідність дописувати стилі для нормального виведення в віджети.