Выпадающее меню в wordpress. Как его сделать?

Все знают, что навигация на сайте должна быть одновременно простой и в тоже время, максимально удобной. Именно поэтому, на своих сайтах многие используют выпадающее меню. В этой статье мы кратко рассмотрим, как на своем wordpress сайте сделать выпадающее меню, а конкретнее, как сделать выпадающее меню, под шапкой блога.

Создать выпадающее меню можно как для нескольких страниц, так и для нескольких рубрик, которые обычно располагаются с правой стороны. Для нормальной работы выпадающего меню wordpress, на Вашем сайте должна быть одна родительская страница и, как минимум, одна дочерняя.Вот как будет выглядеть все строка меню:

Безымянный2 Выпадающее меню в wordpress. Как его сделать?

1. Перед тем, как создать выпадающее меню, обязательно удалите стандартное меню. Откройте файл — sidebar.php, найдите в нем строчку:

<?php wp_list_pages(‘title_li=<h2>Pages</h2>’); ?>
 

и смело ее удаляйте;

2. Теперь откройте файл — header.php, найдите окончание блока «headerimg» и после него вставляйте следующие строки код:

<div id=»menu»>
<?php wp_list_pages(‘title_li=’) ?>
</div>

Значение «menu» указывает на то, что меню будет для страниц, а если изменить это значение на «categories», то это меню будет выводить все созданные рубрики;

3. Сейчас необходимо зайти в style.css и добавить туда (желательно после блоков, которые отвечают за шапку) эти стили :

/*отвечает за общий стиль блока меню*/
#menu {
height: 30px;
background: #4182b8;
margin: 5px 20px 100px 20px;
clear: both;
font-size: 14px;
}
/*отвечает за стиль ссылок в меню*/
#menu li a{
color: #fff;
display: block;
line-height: 27px;
padding: 0 10px;
}
#menu li a:hover {
background: #07599d;
text-decoration: none;
}
/*отвечает за стиль для элементов первого уровня, т.е. дочерних страниц*/
#menu li {
list-style: none;
float: left;
}
/*отвечает за стиль для элементов дочернего меню*/
#menu li ul li {
float: none;
}
#menu ul {
background: #4182b8;
margin: 0; padding: 0;
position: absolute;
z-index: 10;
}

4. В этом шаге, мы немного изменим CSS, для того чтобы активные страницы подсвечивались. Следует использовать следующий код:

 .current_page_item, .current_page_parent{
background: #07599d;
text-decoration: none;
}
Безымянный11 Выпадающее меню в wordpress. Как его сделать?
 

5. Самый важный и последний шаг, который сделает из меню, выпадающее. Для этого в style.css редактируем последний блок стиля выпадающего меню и делаем его таким:

/*строка display:none прячет выпадающее меню*/
#menu ul{
display: none;
background: #4182b8;
margin: 0; padding: 0;
position: absolute;
z-index: 10;
}

Теперь необходимо подключить jquery к нашему шаблону, а для этого снова идем в файл — header.php, прописываем там строчку:

<script src=»wp-includes/js/jquery/jquery.js» type=»text/javascript»></script>

И добавляем код, который позволит показывать меню дочернее при наведении :

 <script type=»text/javascript»>
jQuery(document).ready(function(){
jQuery(«#menu li»).hover(
function(){
jQuery(this).find(‘ul’).show();
},
function(){
jQuery(this).find(‘ul’).hide();
}
);
});
</script>
 

Вот так будет выглядеть готовое меню, которое будет радовать глаз посетителей:

Безымянный3 Выпадающее меню в wordpress. Как его сделать?

Как Вы поняли, в создании выпадающего меню нет ничего сложного, и Вы сможете своими руками сделать его на своем сайте, главное все делайте внимательно.

Комментировать

КОММЕНТАРИИ

13.02.13 Ответить
Kolombo:

Кратко и понятно. Спасибо!

13.02.13 Ответить
Игорь:

Забрал код выпадающего меню. Хорошо что его уже кто-то написал, самому мучаться не надо

13.02.13 Ответить
Леша:

Если хотите сделать выпадающее меню в WordPress, лучше плагины погуглите. Они просто настраиваются виджетами и стабильнее ведут себя

13.02.13 Ответить
Contest:

Благодарю за доступное объяснение. Теперь и я обладатель выпадающего меню

06.03.13 Ответить
M.CH:

Как поступить если отсутствует блок headerimg?
у меня в файле header.php прописаны только вот так:

<html xmlns="http://www.w3.org/1999/xhtml&quot; >

<meta http-equiv="Content-Type" content="text/html; charset=» />
<link rel="shortcut icon" href="/favicon.ico» />
<link rel="stylesheet" href="» type=»text/css» media=»screen» />
<link rel="alternate" type="application/rss+xml" title="» href=»» />

 

16.08.13 Ответить
Андрей:

А как чайнику это сделать? Где пошагово посмотреть?

01.03.14 Ответить
Александр:

Очень полезная информация! Огромное вам спасибо! Выручили

10.10.14 Ответить
Володя:

Привет друзья. таков вопрос.
Есть сайт. Сделал боковое меню. не выпадает. точнее не выдвигается вниз. нашёл плагин хороший . jQuery Vertical Accordion Menu .
Работает как надо выдвигается и т.д. .
НО ! очень важный момент. Заказчик хочет. если так сказать было пункты например : 1 , 2 , 3 , 4. и есть соответствующие подпункты 1.1. , 1.2, 1.3, и 3.1, 3.2, 3.3, — главное суть ясна. И например если открываешь выдвижные меню. нажимаешь на ссылку например на 3.2. то в открытой странице — уже будет 1,2,3,4 и снова надо нажимать чтобы выдвигалось. Как можно сделать — чтобы осталось то меню которое было при переходе.. а не обнулялось на постояне ! Спасибо друзья — помогите чем магёте !

20.05.15 Ответить
Виктор:

Вообще обалденно помогла статья! Правда одним копи/пастом не не обойтись, так как кавычки не верно обозначены. Ну, мало ли, кто не понял почему не работает.