Выпадающее меню в 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 комментариев

Mihail Svobodniu, 03.02.2010 в 15:00

Как то не так все это получается =/
А самое главное выпадающее меню делают либо шаблон для гс либо делают только на рубрики! =(

ОтветитьОтветить
Sanya, 04.02.2010 в 18:34

Deimos, Спасибо, работает.
у меня еще один вопрос 🙂
в IE6 меню не работает, т.е. отображается не должным образом - в столбик. Может у кого была такая проблема???
Как оно выглядит в IE6 посмотреть можно здесь http://amatik.ru/error.JPG
Заранее Спасибо!

ОтветитьОтветить
Флетчер, 04.02.2010 в 19:02

Проблемы свою решил переписав стили:
#menu, #menu ul {margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%;font-weight:bold;}
#menu a {display:block;margin: 0 2px 0 2px;padding:0.25em 0.5em; color:#fff; border-right:1px solid #D8EDFB;border-left:1px solid #D8EDFB; text-decoration:none; background: #1D4583;filter:alpha(opacity=80);-moz-opacity:.8;opacity:.8;}
#menu a:hover {background: #194C8B;color:#fff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}
#menu li {float:left;position:relative;}
#menu ul {position:absolute; display:none; width:12em; top:1.9em;}
#menu ul a {border-bottom:1px solid #D8EDFB;}
#menu li ul { width:14.1em;}
#menu li ul a {width:12em;height:auto;float:left;}
#menu ul ul {top:auto;}
#menu li ul ul {left:12em; margin:0px 0 0 10px;}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul {display:none;}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul {display:block;}

А библиотеку JQuery по-моему можно также продключить функцией

ОтветитьОтветить
Sanya, 08.02.2010 в 17:56

Флетчер, Спасибо!
А конкретно что нужно для нормального отображения в IE6 в этом случае не подскажете?, чтобы не переписывать все стили.

ОтветитьОтветить
Artemka, 08.02.2010 в 23:04

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

ОтветитьОтветить
Флетчер, 09.02.2010 в 18:48

Artemka, я например устанавливаю код вызова меню в header обычно сразу после этой строчки


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

ОтветитьОтветить
Artemka, 10.02.2010 в 09:39

Флетчер, спасибо за ответ, но я именно туда меню и вставляю... шапка по центру, как и остальные части шаблона..
но само меню привязано к левому краю монитора и с отступами не угадаешь, т.к. у всех разное разрешение.
Я так понимаю все дело в этой строчке CSS:
position: absolute;
Но если позиционирование делать по-другому, меню разъезжается при наведении мышкой.

ОтветитьОтветить
Alex_CH, 11.02.2010 в 13:03

post, расскажите как сделать выпадающее меню в виджете для e-commerce. А еще лучше дайте пхп код виджета )

ОтветитьОтветить
PRO, 09.02.2011 в 23:11

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

ОтветитьОтветить
миша, 11.05.2011 в 11:44

спасибо установил все работает хорошо

ОтветитьОтветить
Азамат, 16.05.2011 в 22:12

Спасибо большое, очень доступно описал все, у меня классно получилось!!!

ОтветитьОтветить
Сергей!, 22.07.2011 в 12:58

Ребята! Подскажите как добавить в меню главную страницу? Очень надо!!!

ОтветитьОтветить
Сергей!, 22.07.2011 в 15:00

Добавил главную страницу вот таким вот варварским способом:

<a class="" href="/">Главная

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

ОтветитьОтветить
Sergei, 12.08.2011 в 16:13

у меня не чего не получилось хоть все делал как написано,может подскажеш почему.

ОтветитьОтветить
Владимир, 16.08.2011 в 16:46

Подскажите, пожалуйста, как оформить 3-й уровень вложенности? Сейчас он отображается поверх второго.

ОтветитьОтветить
kama, 21.08.2011 в 15:04

Владимир, нужно редактировать CSS стили.

ОтветитьОтветить
Владимир, 21.08.2011 в 15:06

kama, Это я понимаю. Вопрос заключался в том, что именно надо в CSS написать.

ОтветитьОтветить
Простой, 25.08.2011 в 03:47

Довольно симпатичное меню получается:) Автор молодчинка.

ОтветитьОтветить
rni, 19.03.2015 в 22:21

Все сработало, кроме current_page

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

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