Выпадающее меню в представлении не нуждается, все давно уже поняли его преимущества. Удобный способ навигации, отражающий иерархию страниц сайта. И сегодня мы поговорим о том как создать такое меню в своем 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, следующей строчкой:
<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.
Источник
Https://всябронь.рф https://всябронь.рф куда поехать на море. всябронь.рф |
Так доступно все описали, что все вышло сразу, спасибо за удовольствие ))
но это не для большой вложенности да? если выпадающий пункт сделать родителем другой страницы то менюшка не пашит ))
под меню находится изображение, почти в плотную, когда выпадает дочернее меню оно прячется под изображение. Как сделать, чтоб оно вываливалось поверх картинки???
Большое спасибо! Сделал разворачивающееся вертикальное меню в левом виджете для wp e-commerce
Спасибо за интересную статью - тоже поробую на своём блоге такое сделать! =)
спасибо.
только вод на под странице почему то не работает...
Гран мерси - огромное спасибо!
Описание, идея, воплощение - всё на высшем уровне.
Пришлось немного помучаться с выпадающим меню, но это уже мелочи.
С Уважением
РГ
спасибо, ваш вариант больше всего понравился.
но бок появился. недавно ввёл постоянные ссылки, и после этого меню работает только на главной странице.
в чём бок? может какой код заменить надо?
Есть вопрос.. в ie6 получается каша... что делать?
у меня пробема возникла, после добавления стиля меню (когда оно все отображается и не прячется), я добавила дальше как и было написано display: none (так же как и в примере), и у меня теперь просто меню не видно вообще - строчка висит пустая, никаких названий, никакого выпадания, ничего. Делала на теме amazing grace - то есть само меню не создавала. Подскажите как быть?
Меню работает только на главной или на всех страницах если не использовать ЧПУ. В чем проблема?
Спасибо, так работает. Насколько я понял это у меня jquery.js глючит. Вот еще бы знать как это исправить, чтобы не грузить постоянно google?
И у меня еще один вопрос. Можно ли как-нибудь сделать так, чтобы меню было не слева, а по центру страницы?
Статья отличная. У меня вроде все получилось. Единственное что непонятно - это как сделать вывод вкладок второго уровня, как показано на картинке вначале поста?
Здравствуйте! у меня та же пробема, что и у jane (04.12.2009) после добавления стиля меню (когда оно все отображается и не прячется), я добавила дальше как и было написано display: none (так же как и в примере), и у меня теперь просто меню не видно вообще - строчка висит пустая, никаких названий, никакого выпадания, ничего. Подскажите, что не так?
Спасибо автору за статейку.
Все настроил, работает.
Вопрос только есть один у меня: когда активна одна из дочерних страниц, то выпадающее меню на ее родительской странице не появляется. Т.е. получается нужно уходить с этой страницы чтобы посмотреть что там есть еще в списке выпадающего меню.
Надеюсь понятно объяснил.
Заранее спасибо за ответ.
Очень доступно и интересно написано, долго мучалась с проблемой отображения меню, нашла вашу статью. понравилось, только вопрос, как сделать вертикальную ориентацию? Может вопрос глупый, но какой есть)))Помогите, пожааааааалуйста:)
anomalist, не совсем понял сути вопроса ❓