Выпадающее меню в 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. Как его сделать?

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

Комментарии

Kolombo:

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

Игорь:

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

Леша:

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

Contest:

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

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=»» />

 

Андрей:

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

Александр:

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

Володя:

Привет друзья. таков вопрос.
Есть сайт. Сделал боковое меню. не выпадает. точнее не выдвигается вниз. нашёл плагин хороший . 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 и снова надо нажимать чтобы выдвигалось. Как можно сделать — чтобы осталось то меню которое было при переходе.. а не обнулялось на постояне ! Спасибо друзья — помогите чем магёте !

Виктор:

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

Наши проекты
Арбалет

12 инструментов для арбитража в одном сервисе. Теперь не придется тратить время на поиск офферов. Забудьте об API, фрилансерах и PHP.

arbalet.wildo.ru
Паблер

Многофункциональный сервис мониторинга рекламы в тизерных и социальных сетях и анализа сообществ Вконтакте, запущенный в 2015 году.

wildo.ru/advert/publer
Калькулятор арбитражника

Выберите модель оплаты рекламы. Введите ожидаемые данные по вашей рекламной кампании. Получите прогноз ее эффективности.

wildo.ru/calc