Выпадающее меню в представлении не нуждается, все давно уже поняли его преимущества. Удобный способ навигации, отражающий иерархию страниц сайта. И сегодня мы поговорим о том как создать такое меню в своем 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;
}
После добавления стилей меню должно выглядеть примерно так:
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, следующей строчкой:
<?php wp_enqueue_script("jquery"); ?>
Далее код, который позволит отображать дочернее меню, при наведении мыши:
<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.
Ну а ссылочку на пример можно сделать? :)
Вот например: http://www.unistud.ru. Выпадающее меню сверху и сбоку
как на счёт меню третьего уровня?
тот же принцип работы, можно хоть 10-уровневое меню сделать
http://www.unistud.ru/
Вотсбоку там кстати не очень правильно сделано, помоему. А ещё такой вопрос. Я с JS и жквери в частности пока не очень знаком. Как можно сделать задержку при пропадании менюшки. Т.е. я навел на ссылку курсор, а когда убрал менюшка не сразу пропадает, а скажем через 2 секунды.
Это просто пример. А для задержки меню нужно использовать таймер, для знающих ява-скрипт это не проблема, вам могу посоветовать плагин к Jquery, называется Timer
Спасибо за совет, но думаю для этого в jQuery есть и встроенные средства. Например для JS я нашёл функцию setTimeOut() , но, к сожеланию, не разобрался как её применить.
Ага, вот об этом я и говорю, таймер можно и без jquery, организовать, а этот плагин для тех кто не очень знаком с языком, или не хочет тратить время на копание.
http://www.alexilin.ru/web/menu/nojshormenu/
Там есть пример меню. Дык вот в первом и последнем разделах, есть подменю которое появляется сбоку. Как это реализовать?
Ещё хотел спросить на чём реализован блок «Интересные статьи» на сайте?
Меню там чисто на css сделано. Это очень клёво, но к сожалению не юзабельно, хотя бы даже из-за задержки в пропадании (про которую я спрашивал выше). А блок виджет «Интересные статьи» основан на плагине Popularity Contest. Он есть в оф. репозитории плагинов
http://codex.wordpress.org/Plugins
Можно найти и руссифицированный, но это уже сами как-нибудь :)
Этот плагин подсчитывает кол-во просмотров поста, трекбеки, комменты и наверное ещё что-то. На основе этого создает статистику, которая и отвечает за популярность поста.
Автору блога — вопрос с менюшкой остаётся открытым ;)
Блок «Интересные статьи» разработан на основе плагина FeatureMe, но принцип действия его такой же как и у популярных статей. Правда в официальном репозитории я его не встретила.
goodNews: какой именно вопрос остался открытым?)
2 goodnews на CSS и бог с ним. Мне интересно как описанным тут методом сделать такое меню. Сейча выпадающиее меню выпадает только вниз. :) А мне нужно чтоб в бок выпадало :0
2 cammino
в стилях к #menu добавь
right:-100px; и всё будет :)
2 dreamhelg
вопрос по поводу задержки скрытия менюшки. У меня щас просто завал с работой (мы коллеги кстати), немножко разгребу и постараюсь сделать пару примеров с такими менюшками.
По поводу задержки в меню, я использовала setTimeout(), но толком с ним не разобралась, потому как работу надо было сдавать быстро, поэтому планировала про него отдельную статью написать.
2goodnews
Так?
position: relative; right: -100px;
Я просто не вижу разделения в стилях для основного меню и дочерних. То есть если пропишу расположение так, то для всего меню. Или я чего-то недопонял. :(
Не совсем так. Чтобы right работало нужно чтобы position:relative было присвоено родительскому блоку. Я в предыдущем комменте дал не совсем правильный совет. Извиняюсь.
Найди в уроке вот эти строки
#menu ul{
display: none;
background: #4182b8;
margin: 0; padding: 0;
position: absolute;
z-index: 10;
}
В них указано, что менюшка будет иметь абсолютную позицию. По умолчанию это будет означать что она тупо расположится под словом меню. А нам надо чтобы она вываливалась вправо, поэтому именно ей и нужно задать правило right: -100px; и наверное ещё надо top:0;
Т.е. по сути менять особо ничего не надо. Автор урока уже всё прописал где надо, ты просто укажи, что менюшка будет не просто находиться там где она находится а правее на 100 пикселей. Надеюсь в 7 утра я смог доступно тебе это написать :) Если не разберёшься пиши в аську — 190-25-23, подмогу :)
Т.е. в конечном итоге вот что должно получиться
#menu ul{
display:none;
background:#4182b8;
margin:0; padding:0;
position:absolute;
top:0;
right:-100px; /* это примерно */
z-index:10;
}
Сам я этот урок не опробовал ещё, поэтому не гарантирую что щас дал рабочий вариант. Что касается родительских пунктов и дочерних, то тут отдельный вопрос :)
2 goodnews
Пасибо что помогаешь.
В результате менюга открывается справа за границей экрана.
2 goodnews
position:absolute;
Всё таки relative. Мне же надо чтоб он от родительского меню открывался. А так от границы экрана. Либо расстояние высчитывать.
Понимаешь тут какое дело… relative назначается родительским элементам. Это означает что блок (с релейтивом) способен принимать блок у которого position:absolute. Т.е. блок с position:absolute будет так же абсолютно позиционироваться, только не относительно тега html а относительно того блока, в который вложен (при этом этот блок с position:relative). Грубо говоря relative — принимающий абсолютного. Я опять лохнудся и не довёл пример до логического завершения))) Делай всё так как я показал в предыдущем комменте, но ещё добавь к #menu position:relative.
Т.е. примерно вот так
#menu{
position:relative;
height:30px;
background:#4182b8;
margin:5px 20px 100px 20px;
clear:both;
font-size:14px;
}
#menu ul{
display:none;
background:#4182b8;
margin:0; padding:0;
position:absolute;
top:0;
right:-100px; /* это примерно */
z-index:10;
}
enjoy!
Неа :( Не хотит. Открывается также возле правого края. А ещё забываю спросить. При наведении на родительский элемент, открывается как меню, там и подменю, сразу. То есть вся ветка разворачивается. Ещё бы это победить.
Ссылку давай)
2 goodnews
http://test.cammino.net/
бери
Друг, goodnews, а не пробовал ли ты в этом меню сделать так, чтобы в качестве background картинку вставить можно было?
Простым вписыванием url в стилях не отображает.
Идея в том, чтобы в основном меню под названием родителя лежала картинка-подложка.
Для этого по-моему достаточно прописать background у элемента ul, в CSS-стилях, если картинка общая для всего меню, или у элемента a, если для кадой позиции меню нужна отдельная
Пардон, обращение конечно к dreamhelg :)
Жаль, что тема мульти-выпадающего меню так и не раскрыта.
Статья толковая.
+5
спасибо, возможно, в будущих статьях вернусь к этой теме
у меня выпадающее меню прячется под картинку, как сделать чтоб оно поверх вываливалось???
ниже идет флеш ролик, если что…
хорошо, что уточнили что ниже флеш, вот решение, которое мне помогло: http://habrahabr.ru/blogs/webdev/50334/
в стилях пропиши
object, embed {z-index:1;}
#menu {z-index:2;}
не уверен что будет работать, но попробовать можно
Если я ставлю на флэш абсолютное позиционирование весь контент и футэр перемещается вверх под флэшку.
все получилось, просто флэш был по корявому вставлен, даже без скрипта вот решение
Сделай картинкой, не видно
при вставке флэшки
вставляется в object
wmode=opaquе
вставляется в embed
да чтож такое, все что copy/paste тут не показывает?
Делай картинкой и всё будет ок :)
или ещё помоему можно в
Ага, значит тег pre работает :)
Автор, сделай пожалуйста хинт с рабочими тегами. Типа раскрывающийся блок.
сделаю на днях, обязательно
вобщем в диве с флэшкой в тэг object вставляем PARAM NAME=wmode VALUE=opaquе, а в тег embed вставляем wmode = opaque
To dreamhelg:
Продолжаю с удовольствием экспериментировать с твоим выпадающим меню. Если на шаге 2 в header.php добавить вместо
вот это:
то рубрики тоже будут нормально выводиться в общем меню.
Это хорошо. Не нужно лишних страниц плодить, когда очень хочется сайдбар вообще спрятать.
Ещё раз спасибо за статью.
Хм :(
код копипасты не виден.
в общем, если добавить ещё строчку
то и категории тоже будут в меню отображаться