Робимо меню, що випадає на wordpress

Урок 129. Як зробити меню, що випадає на WordPress?

Сьогодні я вирішив розповісти про те, як зробити меню, що випадає на WordPress. Таке меню приємно у використанні і не займає багато місця. Приклад його Ви можете бачити на цьому блозі. Для початку нам знадобиться плагін jQuery Vertical Accordion Menu. Він дуже простий, але в той же час дуже функціональний! У ньому присутні різні теми оформлення: синій, сірий, чорний, червоний. Взагалі, якщо є знання в css, то це меню можна впровадити в абсолютно будь-який дизайн, і воно ніяк не буде виділятися. Власне що я і зробив у себе.

Завантажити цей плагін Ви можете тут. Потім проходимо стандартну процедуру активації.

Ось як виглядає це меню в різних стилях:

Налаштування меню, що випадає

Переходимо в: «Зовнішній вигляд» -> «Меню». Тут нам необхідно створити меню з наших рубрик. Створюйте його таким, яким хочете бачити. Тобто, Рубрики, які Ви хочете бачити на сайті ставте вперед, а підрубрики, які повинні виводитися при натисканні на рубрику, ставте під цією самою рубрикою. У приклад можу показати одну з чотирьох частин свого меню (я його для зручності розділив на 4 частини):

Як бачите, рубрика "Частина 1. Створення блогу" виводиться в меню, а при натисканні на неї, виводяться підрубрики. Зверніть увагу, як вони розташовані. Не просто внизу основний рубрики. а з отступанія нового рядка. Берете потрібну підрубрику, затискаючи ліву кнопку миші, потім підводите її до основної рубриці, і побачите, що з'явилася розмітка пунктирна, яка вказує, куди можна вставити підрубрику.

Ну ось, я стрілкою вказав на те саме місце, в яке треба вставити рубрику. Якщо ж Ви хочете вставити її нижче, після інших підрубрик, то просто перетягніть криву вниз. І побачите, як підрубрики почнуть рухатися, звільняючи місце.

Після того, як Ви налаштували меню потрібним чином, збережіть його (тільки назва запам'ятайте), і переходите у «Зовнішній вигляд» -> «Віджети». Там Ви вибираєте jQuery Vertical Accordion Menu і перетаскуєте його в потрібний блок:

Тепер розберемо настройки по порядку:

Тема - тут Ви вказуєте назву, яке буде відображатися на блозі, перед нашим меню.
Виберіть меню - тут Ви вибираєте створене Вами меню. Якщо Ви його, як і я, розділили на кілька частин, то спочатку вибираєте першу частину.
Click, Hower - в перекладі "Відкрити при натисканні". "Відкрити з наведення миші". У мене відкривається при натисканні, тому я вибрав click.
Auto close open menus - автоматичне закриття відкритого меню. Мені воно не потрібно.
Save menu state - Зберегти положення меню. Якщо у Вас включені куки, то інформація про відкрите меню буде зберігатися. І коли Ви наступного разу зайдете на блог, меню вже буде відкрито там, де Ви його відкривали в минулий раз.
Auto Expand Based on Current Page / Item - автоматичне розтягування на сторінку. Як на мене так це зайве, його я теж вибирати не став.
Disable Parent Links - ось тут необхідно поставити прапорець. Перекладається як: "відключити посилання на рубрику". Тобто, якщо тут Ви галочку не поставили, то при натисканні на рубрику, Ви будете переходити в неї, а підрубрики відкриватися не будуть. Тому раджу галочку все ж встановити.
Close menu (hower only) - закриття меню простим наведенням курсора. І тут я думаю, це зайве. Але на смак і колір.
Show count - відображати цифри. З ними все виглядає негарно, вже повірте. Але тим не менше краще перевірте. Може бути Вам сподобається.
Menu class, Disable class - тут прописуються стилі для любителів css. Я тут нічого не прописував, я працював безпосередньо з файлом плагіна.
Hower delay - затримка при відкритті меню. Тобто, Ви можете поставити затримку в 1 секунду, і коли натиснете на рубрику, меню розкриється тільки через секунду. Як на мене так, якщо Ви дотримуєтеся юзабіліті, ставте no delay (без затримки).
Animation Speed - Швидкість анімації розкриття рубрики. Ну я поставив Slow (повільно) і не сказав би, що занадто повільно розкриваються рубрики. Швидше навіть приємніше.
Ну і останнє - Skin - це, як багато хто знає, зовнішній вигляд. Те, про що я говорив на початку. Можна вибрати червоний, сірий.

Ось ми і розібралися з настройками плагіна. Якщо у Вас меню розділене на кілька частин, то в віджети додайте ще потрібну кількість JQuery Accordion Menu Widget і виберіть інші частини. У результаті повинно вийти одне ціле меню.

На цьому урок підійшов до кінця, всім успіхів!