Выпадающее меню в WordPress
Выпадающее меню в представлении не нуждается, все давно уже поняли его преимущества. Удобный способ навигации, отражающий иерархию страниц сайта. И сегодня мы поговорим о том как создать такое меню в своем wordpress-блоге, и как назначить ему различные стили и визуальные эффекты.
Начнем с самого простого, как создать выпадающее меню в Wordpress. Думаю большинству пользователей это известно, но все же в двух словах объясню. Выпадающее меню – это меню в котором находятся подчиненные страницы, поэтому для того чтобы его создать, вам, в своем блоге нужно создать как минимум одну родительскую страницу, и одну дочернюю.
Чтобы не продолжать беспредметный разговор, давайте представим, что у нас в блоге есть обычная статическая страница под названием "О блоге", вот для нее мы и создадим три подчиненные страницы: "об авторе", "контакты", "партнерам".
Итак, поочередно, самым обычным способом добавим все три страницы, за исключением того, что в поле родительская страница следует выбрать "О блоге".
После этих, довольно простых действий, вы увидите выпадающее меню у себя в блоге, а вот как оно будет выглядеть, зависит от темы, которую вы используете. Если это одна из тем, идущих в комплекте с WordPress, то ваше меню отобразится в сайдбаре, в виде маркированного списка.
Если используете стороннюю тему, тут все зависит от совести разработчика. Мне часто попадались очень красивые темы, в которых совершенно не было предусмотрено выпадающее меню, вследствие чего после его добавления, шаблон разваливался на части.
Так вот если такое произошло и с вами, далее я расскажу, как формируется красивое выпадающее меню, на примере всем знакомого шаблона "WordPress Default".
1. Первое, что мы сделаем, это расположим меню сразу после шапки, а для этого сначала нужно удалить его из сайдабара. Открываем файл sidebar.php, находим в нем строчку
1 | <?php wp_list_pages('title_li=<h2>Pages</h2>'); ?> |
и удаляем ее
2. Теперь расположим меню ниже заголовка, для этого открываем файл header.php, и после блока "headerimg", вставляем следующие строки:
1 2 3 | <div id="menu"> <?php wp_list_pages('title_li=') ?> </div> |
Здесь параметр title_li=, с пустым значением, означает что меню выведется без предваряющей надписи "Страницы".
3. Теперь добавим стилей для нашего меню, чтобы оно выглядело соответственно общему дизайну темы, в файле style.css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | /*общий стиль блока меню*/ #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:
1 2 3 4 | .current_page_item, .current_page_parent{ background: #07599d; text-decoration: none; } |
Здесь .current_page_item – текущая активная страница (на скриншоте выше это страница "партнерам"), .current_page_parent – это ее родительская страница.
5. Все бы хорошо, но выпадающее меню, на то и названо, чтобы появляться и исчезать, при наведении мыши, а не постоянно отображаться на экране. Поэтому для начала мы спрячем его с помощью CSS, а затем будем показывать с помощью JQuery.
1 2 3 4 5 6 7 8 | /*строка display:none прячет выпадающее меню*/ #menu ul{ display: none; background: #4182b8; margin: 0; padding: 0; position: absolute; z-index: 10; } |
Далее потребуется подключить jquery, к нашему шаблону. Это можно сделать в теге head, файла header.php, следующей строчкой:
Далее добавим код, который позволит отображать дочернее меню, при наведении мыши:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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. Эффект медленного появления дочернего меню, делается очень просто, путем изменения высоты, ширины и прозрачности отображаемого блока. Понадобится просто добавить один параметр, к уже написанному коду:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |
Можно добавить эффект появления без прозрачности, вертикальный:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |
Если возникла необходимость, отображать выпадающее меню постоянно, если дочерняя страница активна (подходит для вертикального бокового меню), то это делается следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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
28 комментариев
Так доступно все описали, что все вышло сразу, спасибо за удовольствие ))
но это не для большой вложенности да? если выпадающий пункт сделать родителем другой страницы то менюшка не пашит ))
под меню находится изображение, почти в плотную, когда выпадает дочернее меню оно прячется под изображение. Как сделать, чтоб оно вываливалось поверх картинки???
Большое спасибо! Сделал разворачивающееся вертикальное меню в левом виджете для wp e-commerce
Спасибо за интересную статью - тоже поробую на своём блоге такое сделать! =)
спасибо.
только вод на под странице почему то не работает...
Гран мерси - огромное спасибо!
Описание, идея, воплощение - всё на высшем уровне.
Пришлось немного помучаться с выпадающим меню, но это уже мелочи.
С Уважением
РГ
DSL Эксперт, незачто, рад что Вам понравилось 
mse, все сделали по инструкции?
спасибо, ваш вариант больше всего понравился.
но бок появился. недавно ввёл постоянные ссылки, и после этого меню работает только на главной странице.
в чём бок? может какой код заменить надо?
Есть вопрос.. в ie6 получается каша... что делать?
у меня пробема возникла, после добавления стиля меню (когда оно все отображается и не прячется), я добавила дальше как и было написано display: none (так же как и в примере), и у меня теперь просто меню не видно вообще - строчка висит пустая, никаких названий, никакого выпадания, ничего. Делала на теме amazing grace - то есть само меню не создавала. Подскажите как быть?
Меню работает только на главной или на всех страницах если не использовать ЧПУ. В чем проблема?
Спасибо, так работает. Насколько я понял это у меня jquery.js глючит. Вот еще бы знать как это исправить, чтобы не грузить постоянно google?
И у меня еще один вопрос. Можно ли как-нибудь сделать так, чтобы меню было не слева, а по центру страницы?
Статья отличная. У меня вроде все получилось. Единственное что непонятно - это как сделать вывод вкладок второго уровня, как показано на картинке вначале поста?
Здравствуйте! у меня та же пробема, что и у jane (04.12.2009) после добавления стиля меню (когда оно все отображается и не прячется), я добавила дальше как и было написано display: none (так же как и в примере), и у меня теперь просто меню не видно вообще - строчка висит пустая, никаких названий, никакого выпадания, ничего. Подскажите, что не так?
Спасибо автору за статейку.
Все настроил, работает.
Вопрос только есть один у меня: когда активна одна из дочерних страниц, то выпадающее меню на ее родительской странице не появляется. Т.е. получается нужно уходить с этой страницы чтобы посмотреть что там есть еще в списке выпадающего меню.
Надеюсь понятно объяснил.
Заранее спасибо за ответ.
Очень доступно и интересно написано, долго мучалась с проблемой отображения меню, нашла вашу статью. понравилось, только вопрос, как сделать вертикальную ориентацию? Может вопрос глупый, но какой есть)))Помогите, пожааааааалуйста:)
Как то не так все это получается =/
А самое главное выпадающее меню делают либо шаблон для гс либо делают только на рубрики! =(
Deimos, Спасибо, работает.
у меня еще один вопрос 
в IE6 меню не работает, т.е. отображается не должным образом - в столбик. Может у кого была такая проблема???
Как оно выглядит в IE6 посмотреть можно здесь http://amatik.ru/error.JPG
Заранее Спасибо!
Проблемы свою решил переписав стили:
#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 по-моему можно также продключить функцией
Флетчер, Спасибо!
А конкретно что нужно для нормального отображения в IE6 в этом случае не подскажете?, чтобы не переписывать все стили.
Во всех примерах меню позиционируется абсолютно от края экрана. Мой шаблон имеет выравнивание по центру.. и соответственно, в зависимости от разрешения монитора, центр плавает.
Как отцентрованть горизонтальное меню с выпадающими вниз подпунктами?
Подскажите плиз :))
Artemka, я например устанавливаю код вызова меню в header обычно сразу после этой строчки
1 | <div id="header"> |
в зависимости от темы название стиля может меняться. а так как хедер у нас позиционирован как задумано темой то и меню будет тоже вести себя аналогично.
Единственно что бывает надо подправить так это отступы сверху и сбоку.
Пробовал на разных темах, при масштабировании у меня всё Ок.
Флетчер, спасибо за ответ, но я именно туда меню и вставляю... шапка по центру, как и остальные части шаблона..
но само меню привязано к левому краю монитора и с отступами не угадаешь, т.к. у всех разное разрешение.
Я так понимаю все дело в этой строчке CSS:
position: absolute;
Но если позиционирование делать по-другому, меню разъезжается при наведении мышкой.
post, расскажите как сделать выпадающее меню в виджете для e-commerce. А еще лучше дайте пхп код виджета )
Оставить ответ
Рубрики
Новые статьи
Новые комментарии
Архивы
Облако тегов
- админка
- ап
- база данных
- безопасность
- взлом
- денвер
- дизайн
- записи
- защита
- изображения
- комментарии
- настройка шаблона
- новичку
- оптимизация
- плагины
- поиск
- праздник
- раскрутка
- сайдбар справа
- сборка
- сервисы
- страницы
- темные
- темы
- тиц
- форум
- функции
- хаки
- яндекс
- 2 колонки
- 2.8
- 2.9
- AdSense
- bbPress
- feed
- feedburner
- localhost
- mysql
- PR
- RSS
- SEO
- SmashingMagazine
- thumbnails
- yandex
Топ комментаторов
anomalist, не совсем понял сути вопроса