У цій статті я розповім, як створити випадаюче меню для WordPress на CSS. Спочатку опишу всі етапи створення меню з налаштуванням через CSS, а потім виведу його через файл теми.

Примітка: я буду використовувати WordPress 3.9 і тему Twenty Thirteen, але всі дії аналогічні для будь-якого сайту на WordPress 3.

Демо-версія

Нижче наведено посилання на скачування ZIP-архіву, який містить усі необхідні для цієї статті коди.

Демо-версія: Випадаюче меню для WordPress — Версія 1.0 (3 кБ ZIP)

Створюємо меню в WordPress

WordPress 3 має простий у використанні drag-and-drop інтерфейс для створення структури меню. Якщо ви ще не працювали з меню, щоб створити і зберегти користувальницьке меню, перейдіть Зовнішній вигляд > Меню. Виберіть меню назва і збережіть його:

Додавання настроюваних Walker-класу в functions.php

Перш, ніж ми зможемо вивести меню у файлі теми WordPress, нам потрібно додати Walker-клас WordPress в файл functions.php.

Цей код «очистить» виводиться HTML-розмітку нашого меню, щоб ми могли легко створювати CSS. Скопіюйте та вставте код класу Walker в файл functions.php, який розташовується в папці теми. Якщо файл functions.php не існує, створіть його, а потім вставте в нього код класу:

class CSS_Menu_Walker extends Walker {
var $db_fields = array(‘parent’ => ‘menu_item_parent’, ‘id’ => ‘db_id’);
function start_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat(«t», $depth);
$output .= «n$indent

    n»;
    }
    function end_lvl(&$output, $depth = 0, $args = array()) {
    $indent = str_repeat(«t», $depth);
    $output .= «$indent

n»;
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
global $wp_query;
$indent = ($depth) ? str_repeat(«t», $depth) : «;
$class_names = $value = «;
$classes = empty($item->classes) ? array() : (array) $item->classes;
/* Додавання активного класу */
if (in_array(‘current-menu-item’, $classes)) {
$classes[] = ‘active’;
unset($classes[‘current-menu-item’]);
}
/* Перевірка наявності дочірніх елементів */
$children = get_posts(array(‘post_type’ => ‘nav_menu_item’, ‘nopaging’ => true, ‘numberposts’ => 1, ‘meta_key’ => ‘_menu_item_menu_item_parent’, ‘meta_value’ => $item->ID));
if (!empty($children)) {
$classes[] = ‘has-sub’;
}
$class_names = join(‘ ‘, apply_filters(‘nav_menu_css_class’, array_filter($classes), $item, $args));
$class_names = $class_names ? ‘ class=»‘ . esc_attr($class_names) . ‘»‘ : «;
$id = apply_filters(‘nav_menu_item_id’, ‘menu-item-‘. $item->ID, $item, $args);
$id = $id ? ‘ id=»‘ . esc_attr($id) . ‘»‘ : «;
$output .= $indent . «;
$attributes = ! empty($item->attr_title) ? ‘ title=»‘ . esc_attr($item->attr_title) .'»‘ : «;
$attributes .= ! empty($item->target) ? ‘ target=»‘ . esc_attr($item->target ) .'»‘ : «;
$attributes .= ! empty($item->xfn) ? ‘ rel=»‘ . esc_attr($item->xfn ) .'»‘ : «;
$attributes .= ! empty($item->url) ? ‘ href=»‘ . esc_attr($item->url ) .'»‘ : «;
$item_output = $args->before;
$item_output .= ‘‘;
$item_output .= $args->link_before . apply_filters(‘the_title’, $item->title, $item->ID) . $args->link_after;
$item_output .= ‘
‘;
$item_output .= $args->after;
$output .= apply_filters(‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args);
}
function end_el(&$output, $item, $depth = 0, $args = array()) {
$output .= «

n»;
}
}

Висновок через меню файл теми

Тепер у нас є створене меню і розміщений клас Walker. Настав час вивести наше меню через файл теми. Для цього ми використовуємо функцію wp_nav_menu(). З допомогою PHP ми викличемо цю функцію і передамо їй параметри нашого меню для виведення структури HTML.

Параметр menu — це назва меню, створеного нами в кроці 1. container_id додає в HTML-код ідентифікатор меню CSS, який ми будемо використовувати пізніше в стилях CSS. Параметр Walker вказує функції wp_nav_menu() використовувати для відображення HTML-розмітки наш користувацький Walker-клас WordPress:

‘Main Menu’,
‘container_id’ => ‘cssmenu’,
‘walker’ => new CSS_Menu_Walker()
)); ?>

Додайте цей код PHP в один з файлів теми. Де б ви його не помістили, меню буде виводитися в цьому місці. Я використовую тему WordPress за замовчуванням Twenty Thirteen. Вона містить файл header.phpу нього я і вставлю цей код.

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

Випадаюче меню для WordPress на CSS

Додавання CSS

Відкрийте файл CSS вашої теми styles.css (в папці CSS або в кореневому каталозі теми). Ви можете скопіювати і вставити весь наведений нижче код у файл CSS вашої теми. Я буду розбивати CSS-код на частини, щоб пояснювати кожен його фрагмент.

Зверніть увагу, що ми використовуємо той же ідентифікатор, який ми вказали у функції wp_nav_menu() — #cssmenu.

Перший фрагмент CSS-коду — це лише кілька рядків, щоб бути впевненими, що всі браузери починають обробку з тієї ж точки:

#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
border: none;
margin: 0;
padding: 0;
line-height: 1;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

Наступний фрагмент CSS-коду — це стилі першого рівня випадаючого меню. Якщо браузер користувача не підтримує градієнти, то заповніть фон кольором #3c3c3c.

Псевдоклас :after дозволяє додати тонку кольорову рамку навколо кожного пункту меню:

#cssmenu {
height: 37px;
display: block;
padding: 0;
margin: 0;
border: 1px solid;
border-radius: 5px;
width: auto;
border-color: #080808;
}
#cssmenu,
#cssmenu > ul > li > ul > li a:hover {
background: #3c3c3c;
background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -webkit-gradient(linear, left, top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #222222));
background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: linear-gradient(top, #3c3c3c 0%, #222222 100%);
}
#cssmenu > ul {
list-style: inside none;
padding: 0;
margin: 0;
}
#cssmenu > ul > li {
list-style: inside none;
padding: 0;
margin: 0;
float: left;
display: block;
position: relative;
}
#cssmenu > ul > li > a {
outline: none;
display: block;
position: relative;
padding: 12px 20px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
font-weight: bold;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
border-right: 1px solid #080808;
color: #ffffff;
}
#cssmenu > ul > li > a:hover {
background: #080808;
color: #ffffff;
}
#cssmenu > ul > li:first-child > a {
border-radius: 0 0 5px 5px;
}
#cssmenu > ul > li > a:after {
content: «;
position: absolute;
border-right: 1px solid;
top: -1px;
bottom: -1px;
right: -2px;
z-index: 99;
border-color: #3c3c3c;
}

На даний момент ваше меню повинне виглядати так, як показано на малюнку нижче:

Випадаюче меню для WordPress на CSS

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

Спочатку нам потрібно встановити для всіх пунктів підменю display: none. Після цього ми використовуємо псевдоклас :hover, щоб встановити для підменю стан:hover. Це створить ефект приховування і виведення підменю при наведенні покажчика миші на батьківський елемент:

#cssmenu ul li.has-sub:hover > after a: {
top: 0;
bottom: 0;
}
#cssmenu > ul > li.has-sub > a:before {
content: «;
position: absolute;
top: 18px;
right: 6px;
border: 5px solid transparent;
border-top: 5px solid #ffffff;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 19px;
}
#cssmenu ul li.has-sub:hover > a {
background: #3f3f3f;
border-color: #3f3f3f;
padding-bottom: 13px;
padding-top: 13px;
top: -1px;
z-index: 999;
}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover > div {
display: block;
}
#cssmenu ul li.has-sub > a:hover {
background: #3f3f3f;
border-color: #3f3f3f;
}
#cssmenu ul li > ul,
#cssmenu ul li > div {
display: none;
width: auto;
position: absolute;
top: 38px;
padding: 10px 0;
background: #3f3f3f;
border-radius: 0 0 5px 5px;
z-index: 999;
}
#cssmenu ul li > ul {
width: 200px;
}
#cssmenu ul li > ul li {
display: block;
list-style: inside none;
padding: 0;
margin: 0;
position: relative;
}
#cssmenu ul li > ul li a {
outline: none;
display: block;
position: relative;
margin: 0;
padding: 8px 20px;
font: 10pt Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
#cssmenu ul ul a:hover {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a:hover:before {
border-top: 5px solid #ffffff;
}

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

Вихідні файли

За цим посиланням ви можете завантажити вихідні файли. ZIP-архів містить functions.php і styles.css:

Демо-версія: Випадаюче меню для WordPress — Версія 1.0 (3 кБ ZIP)

Усунення неполадок

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

Єдиний спосіб вирішити цю проблему — визначити ці стилі CSS і видалити їх. Краще всього використовувати для цього розширення Firebug для Firefox і проінспектувати стилі CSS вручну. Як тільки ви знайдете конфліктуючі стилі, видаліть їх.

Переклад статті «CSS Dropdown Menu in WordPress» був підготовлений дружною командою проекту Сайтостроение від А до Я.