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

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

Создать выпадающее меню можно как для нескольких страниц, так и для нескольких рубрик, которые обычно располагаются с правой стороны. Для нормальной работы выпадающего меню 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;

}

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>

 

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

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