Выпадающее меню в WordPress

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

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

Чтобы не продолжать беспредметный разговор, давайте представим, что у нас в блоге есть обычная статическая страница под названием "О блоге", вот для нее мы и создадим три подчиненные страницы: "об авторе", "контакты", "партнерам".

Итак, поочередно, самым обычным способом добавим все три страницы, за исключением того, что в поле родительская страница следует выбрать "О блоге".

Выпадающее меню в WordPress

После этих, довольно простых действий, вы увидите выпадающее меню у себя в блоге, а вот как оно будет выглядеть, зависит от темы, которую вы используете. Если это одна из тем, идущих в комплекте с WordPress, то ваше меню отобразится в сайдбаре, в виде маркированного списка.

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

Так вот если такое произошло и с вами, далее я расскажу, как формируется красивое выпадающее меню, на примере всем знакомого шаблона "WordPress Default".

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>

Здесь параметр title_li=, с пустым значением, означает что меню выведется без предваряющей надписи "Страницы".

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;
}

После добавления стилей меню должно выглядеть примерно так:

Выпадающее меню в WordPress

4. Далее было бы неплохо, выделять активные страницы. Это реализуется довольно просто, с помощью CSS:

.current_page_item, .current_page_parent{
background: #07599d;
text-decoration: none;
}

Здесь .current_page_item – текущая активная страница (на скриншоте выше это страница "партнерам"), .current_page_parent – это ее родительская страница.

5. Все бы хорошо, но выпадающее меню, на то и названо, чтобы появляться и исчезать, при наведении мыши, а не постоянно отображаться на экране. Поэтому для начала мы спрячем его с помощью CSS, а затем будем показывать с помощью JQuery.

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

Далее потребуется подключить jquery, к нашему шаблону. Это можно сделать в теге head, файла 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>

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

6. Эффект медленного появления дочернего меню, делается очень просто, путем изменения высоты, ширины и прозрачности отображаемого блока. Понадобится просто добавить один параметр, к уже написанному коду:

<script type="text/javascript">
jQuery(document).ready(function(){

jQuery("#menu li").hover(

function(){
jQuery(this).find('ul').show('slow');
},

function(){
jQuery(this).find('ul').hide();
}
);
});
</script>

Можно добавить эффект появления без прозрачности, вертикальный:

<script type="text/javascript">
jQuery(document).ready(function(){

jQuery("#menu li").hover(

function(){
jQuery(this).find('ul').slideDown();
},

function(){
jQuery(this).find('ul').slideUp();
}
);
});
</script>

Если возникла необходимость, отображать выпадающее меню постоянно, если дочерняя страница активна (подходит для вертикального бокового меню), то это делается следующим образом:

<script type="text/javascript">
jQuery(document).ready(function(){

if(jQuery("#menu li").hasClass('current_page_parent')){
jQuery("#menu li ul").show();
}

jQuery("#menu li").hover(function(){
jQuery(this).find('ul').show('slow');
},

function(){
if (!jQuery(this).hasClass('current_page_parent')){
jQuery(this).find('ul').hide();
}
}
);
});
</script>

Как видно, выпадающее меню под силу сделать любому пользователю, и его внешний вид полностью зависит от вашей фантазии, и знания эффектов jQuery.
Источник

Предыдущие записи из рубрики `Учебник WordPress`

39 комментариев

Алексей, 23.06.2009 в 21:33

Так доступно все описали, что все вышло сразу, спасибо за удовольствие ))

ОтветитьОтветить
anomalist, 04.08.2009 в 13:03

но это не для большой вложенности да? если выпадающий пункт сделать родителем другой страницы то менюшка не пашит ))

ОтветитьОтветить
Deimos, 04.08.2009 в 13:13

anomalist, не совсем понял сути вопроса ❓

ОтветитьОтветить
liksunov, 12.08.2009 в 16:33

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

ОтветитьОтветить
post, 26.09.2009 в 06:10

Большое спасибо! Сделал разворачивающееся вертикальное меню в левом виджете для wp e-commerce

ОтветитьОтветить
crack382, 28.09.2009 в 01:33

Спасибо за интересную статью - тоже поробую на своём блоге такое сделать! =)

ОтветитьОтветить
mse, 07.10.2009 в 23:46

спасибо.
только вод на под странице почему то не работает...

ОтветитьОтветить
DSL Эксперт, 08.10.2009 в 02:14

Гран мерси - огромное спасибо!
Описание, идея, воплощение - всё на высшем уровне.
Пришлось немного помучаться с выпадающим меню, но это уже мелочи.
С Уважением
РГ

ОтветитьОтветить
Deimos, 08.10.2009 в 12:54

DSL Эксперт, незачто, рад что Вам понравилось 😉
mse, все сделали по инструкции?

ОтветитьОтветить
Артём, 08.11.2009 в 11:21

спасибо, ваш вариант больше всего понравился.

но бок появился. недавно ввёл постоянные ссылки, и после этого меню работает только на главной странице.
в чём бок? может какой код заменить надо?

ОтветитьОтветить
fokk, 25.11.2009 в 11:11

Есть вопрос.. в ie6 получается каша... что делать?

ОтветитьОтветить
Jane, 04.12.2009 в 00:13

у меня пробема возникла, после добавления стиля меню (когда оно все отображается и не прячется), я добавила дальше как и было написано display: none (так же как и в примере), и у меня теперь просто меню не видно вообще - строчка висит пустая, никаких названий, никакого выпадания, ничего. Делала на теме amazing grace - то есть само меню не создавала. Подскажите как быть?

ОтветитьОтветить
Артем, 05.01.2010 в 17:27

Меню работает только на главной или на всех страницах если не использовать ЧПУ. В чем проблема?

ОтветитьОтветить
Deimos, 05.01.2010 в 21:23

Артем, должно на всех работать, попробуйте вместо строки:

написать:

Может поможет 🙂

ОтветитьОтветить
Артем, 05.01.2010 в 23:18

Спасибо, так работает. Насколько я понял это у меня jquery.js глючит. Вот еще бы знать как это исправить, чтобы не грузить постоянно google?
И у меня еще один вопрос. Можно ли как-нибудь сделать так, чтобы меню было не слева, а по центру страницы?

ОтветитьОтветить
Флетчер, 06.01.2010 в 17:03

Статья отличная. У меня вроде все получилось. Единственное что непонятно - это как сделать вывод вкладок второго уровня, как показано на картинке вначале поста?

ОтветитьОтветить
Ольга, 10.01.2010 в 13:47

Здравствуйте! у меня та же пробема, что и у jane (04.12.2009) после добавления стиля меню (когда оно все отображается и не прячется), я добавила дальше как и было написано display: none (так же как и в примере), и у меня теперь просто меню не видно вообще - строчка висит пустая, никаких названий, никакого выпадания, ничего. Подскажите, что не так?

ОтветитьОтветить
Sanya, 25.01.2010 в 02:26

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

ОтветитьОтветить
Deimos, 25.01.2010 в 13:39

Sanya, попробуйте сделать так, вместо строки:

написать:

Может поможет 🙂

ОтветитьОтветить
Елена, 27.01.2010 в 16:27

Очень доступно и интересно написано, долго мучалась с проблемой отображения меню, нашла вашу статью. понравилось, только вопрос, как сделать вертикальную ориентацию? Может вопрос глупый, но какой есть)))Помогите, пожааааааалуйста:)

ОтветитьОтветить

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