Меню, що випадає в представлення не потребує, все давно вже зрозуміли його переваги. Зручний спосіб навігації, що відображає ієрархію сторінок сайту. І сьогодні ми поговоримо про те як створити таке меню в своєму wordpress-блозі, і як призначити йому різні стилі і візуальні ефекти.
Почнемо з самого простого, як створити меню, що випадає в WordPress. Думаю більшості користувачів це відомо, але все ж в двох словах поясню. Меню, що випадає - це меню в якому знаходяться підлеглі сторінки, тому для того щоб його створити, вам, в своєму блозі потрібно створити як мінімум одну батьківську сторінку, і одну дочірню.
Отже, по черзі, самим звичайним способом додамо всі три сторінки, за винятком того, що в поле батьківська сторінка слід вибрати "Про блозі".
Після цих, досить простих дій, ви побачите меню, що випадає у себе в блозі, а от як воно буде виглядати, залежить від теми, яку ви використовуєте. Якщо це одна з тем, що йдуть в комплекті з WordPress, то ваше меню відобразиться в сайдбарі, у вигляді маркованого списку.
Якщо використовуєте сторонню тему, тут все залежить від совісті розробника. Мені часто траплялися дуже красиві теми, в яких абсолютно не було передбачено меню, що випадає, внаслідок чого після його додавання, шаблон розвалювався на частини.
Так от якщо таке сталося і з вами, далі я розповім, як формується красиве меню, що випадає, на прикладі всім відомого шаблону "WordPress Default".
1. Перше, що ми зробимо, це розташуємо меню відразу після шапки, а для цього спочатку потрібно видалити його з сайдабара. Відкриваємо файл sidebar.php. знаходимо в ньому рядок
2. Тепер розташуємо меню нижче заголовка, для цього відкриваємо файл header.php. і після блоку "headerimg", вставляємо наступні рядки:
Тут параметр title_li =, з порожнім значенням, означає що меню виведеться без випереджає написи "Сторінки".
3. Тепер додамо стилів для нашого меню, щоб воно виглядало відповідно загальному дизайну теми, в файлі style.css:
Після додавання стилів меню повинно виглядати приблизно так:
4. Далі було б непогано, виділяти активні сторінки. Це реалізується досить просто, за допомогою CSS:
Тут .current_page_item - поточна активна сторінка (на скріншоті вище це сторінка "партнерам"). current_page_parent - це її батьківська сторінка.
5. Все б добре, але меню, що випадає, на те і названо, щоб з'являтися і зникати, при наведенні миші, а не постійно відображатися на екрані. Тому для початку ми сховаємо його за допомогою CSS, а потім будемо показувати за допомогою JQuery.
Далі потрібно підключити jquery, до нашого шаблоном. Це можна зробити в тезі head, файлу header.php. Наступного рядком:
Далі додамо код, який дозволить відображати дочірнє меню, при наведенні миші:
В принципі цього достатньо, тепер при наведенні миші до імені сторінки, буде відображатися дочірнє меню. Але можна піти далі, і додати різні ефекти появи дочірнього меню.
6. Ефект повільного появи дочірнього меню, робиться дуже просто, шляхом зміни висоти, ширини і прозорості відображуваного блоку. Знадобиться просто додати один параметр, до вже написаного коду:
Можна додати ефект появи без прозорості, вертикальний:
Якщо виникла необхідність, відображати меню, що випадає постійно, якщо дочірня сторінка активна (підходить для вертикального бічного меню), то це робиться в такий спосіб:
Як видно, меню, що випадає під силу зробити будь-якому користувачеві, і його зовнішній вигляд повністю залежить від вашої фантазії, і знання ефектів jQuery.
джерело