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

drop-down-menu

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

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

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

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

page_parent

После этих, допольно простых действий, вы увидете выпадающее меню у себя  в блоге, а вот как оно будет выглядеть, зависит от темы, которую вы используете. Если это одна из тем, идущих в комплекте с 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;
}

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

drop-down-menu

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.

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

  2. В общем, извини, если повторяюсь, просто почему-то когда пытаюсь оставить коммент, сайт навсегда зависает на белой странице, и не понятно, ушло сообщение или нет.
    Проблема вот в чём:
    http://www.xcom.ru/wordpress/
    Пункт меню — мы предлагаем.
    Там есть «серверы» и «компьютеры» — это рубрики дочерние от «мы предлагаем»
    Чтобы выпадали остальные «серверы х-сом» и . д. их пришлось тоже сделать дочками от «мы предлагаем», потому что, когда внутри «серверы» создаёшь дочек и постишь запись туда, то выпадает только последний уровень.
    Ещё подробнее:
    создаю рубрику, к примеру, «компьютеры для офиса» внутри «Компьютеры Х-Сом» и помещаю туда запись «компьютер Х-Office Desktop». В этом случае выпадающее меню «мы предлагаем» начинает содержать в себе только «Компьютеры Х-Сом» -> «Компьютеры для офиса», а всё остальное пропадает из выпадающего списка.

    Ответить

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

      wp_list_categories()

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

      Ответить

  4. есть одна проблема, при активации ЧПУ и перехода на любую страницу менюшка перестает работать… обидно… если есть время отпишите на почту, помогите пожалуйста

    Ответить

  5. Пункт 5, меню спряталось, дальше тупик.
    по разному устанавливал строку и скрипт.

    Ответить

  6. jQuery(document).ready(function(){

    jQuery(«#menu li»).hover(

    function(){
    jQuery(this).find(‘ul’).show();
    },

    function(){
    jQuery(this).find(‘ul’).hide();
    }
    );
    });

    <meta http-equiv="Content-Type" conte

    Ответить

  7. «Ваша тема вероятно уже включает в себя функцию wp_head, так что убедитесь что вы расположили вызов функции wp_enqueue_script ДО функции wp_head. Теперь вы можете включить вызов своего собственного JQuery JavaScript-файла ПОСЛЕ функции wp_head.»
    Из предыдущей статьи.

    спс, разобрался

    Ответить

    1. Используйте для вывода меню функцию:

      wp_page_menu('show_home=1'); (конечно же в тегах php)

      Эта функция выведет все страницы, включая главную.

      Ответить

    1. скорее всего в файле header.php, там где у вас расположено меню, это зависит от шаблона

      Ответить

    1. Не пойму в чем ваша проблема, ищете строчку wp_list_pages('title_li='), и заменяете ее на wp_page_menu('show_home=1').
      Если уж совсем ничего не получится, пришлите мне вашу тему, я могу поставить сама ;)

      Ответить

  12. Помоги плиз вставить в WP тему выпадающее меню, а то по приведенному выше примеру не выходит каменный цветок.

    Ответить

  13. «есть одна проблема, при активации ЧПУ и перехода на любую страницу менюшка перестает работать… обидно… если есть время отпишите на почту, помогите пожалуйста»

    такая же проблема, как решить?

    Ответить

    1. в случае с неработающими ЧПУ, проблема была в неправильном подключении jquery в вордпрессе, проверьте. Подключать лучше всего вот так

      Ответить

  14. dreamhelg, подскажите, пожалуйста, по моей ситуации.

    Все сделала строго по статье, jquery подключила тоже правильно, однако столкнулась с проблемой.
    При открытии страницы меню раскрывается сразу полностью (т.е. сразу в выпадающем виде), а если наведешь (еще не кликая), то подстраницы скрываются. После этого меню, если навести мышкой, уже начинает работать правильно — при наведении выпадают подстраницы. Где я ошиблась?

    Ответить

    1. Очень похоже, что вы забыли скрыть выпадающее меню в CSS. Потому что прежде чем его показать, оно должно быть скрыто. Проверьте, есть ли у выпадающего меню в стилях строка:

      display: none;

      Ответить

  15. Спасибо, все работает
    стили прописал, в лисе норм отображается, а в ie дочернее меню появляется не под главным, а наползает на него
    Для ul прописал position: absolute. На вскидку не можешь предположить что не хватает?

    Ответить

  16. Сделала всё по порядку в пункте 3, но меню не выглядит в виде синих блоков, а отражается в виде обычных строчных ссылок. к тому же, они смещены с основной полосы вниз, и выглядят некрасиво.
    Ещё вопросы (может, проблема в этом):
    -#menu li a — это то же самое, что menu a?
    -#menu li a: hover — то же, что menu a hover?
    -у меня не было в css menu li ul li — его просто нужно было вписать?

    Ответить

    1. Если пункты меню выглядят как текстовые ссылки, значит вы не указали ссылкам свойство display: block. По поводу смещения то же самое, недописали что-то в CSS, если у вас не получается с вашим примером, попробуйте сначала полностью скопировать мой, возможно вам это поможет.

      Ответить
  17. Уведомление: Выпадающее меню это просто! |  Фонин.ру

        1. У меня нет под рукой нужных инструментов именно для ие6, но попробуйте назначить такие стили:

          #menu li ul li{
          display: block;
          float: none;
          }

          #menu li ul{
          display: block;
          }

          Не гарантирую, что это поможет, но нужно пробовать.

          Ответить

          1. а как же поставить у #menu li ul {display:block;} если там стоит «none»
            и ещё почему может быть такое что когда загружается страница выпадающие меню видно сразу и только после наведения курсора пропадает? спасибо большое за уделённое время=) вы моя последняя надежда

          2. Если еще не разобрались с меню, пришлите мне шаблон, я посмотрю, что можно сделать.

          3. спасибо большое за понимание
            вот ссылка на шаблон

  19. У меня вроде бы всё получилось, НО выпадающие вкладки второго уровня у меня смещаются и раскрываются вместе с главными. Это вроде нужно прописать в стилях, но я не понял как именно. Не подскажите как быть?

    Код в header.php:


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

    Рубрики

    Архивы

    jQuery(document).ready(function(){
    jQuery("#menu li").hover(
    function(){
    jQuery(this).find('ul').slideDown();
    },
    function(){
    jQuery(this).find('ul').slideUp();
    }
    );
    });

    Код в style:

    /*общий стиль блока меню*/
    #menu{
    height: 27px;
    margin: 15px 20px 100px 60px;
    clear: both;
    font-size: 14px;
    }
    /*стиль ссылок в меню*/
    #menu li a{
    color: #fff;
    display: block;
    line-height: 27px;
    padding: 0 10px 0 10px;
    margin: 0 5px 0 5px;
    border: 1px dashed #D8EDFB;
    background: #6CBCF2;
    font-weight: bold;
    filter:alpha(opacity=80);-moz-opacity:.8;opacity:.8;
    }
    #menu li a:hover{
    background: #6CBCF2;
    text-decoration: none;
    border: 1px solid #D8EDFB;
    filter:alpha(opacity=100);-moz-opacity:1;opacity:1;
    }
    /*стиль для элементов первого уровня, т.е. дочерних страниц*/
    #menu li{
    list-style: none;
    float: left;
    }
    /*стиль для элементов дочернего меню*/
    #menu li ul li{
    float: none;
    }

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

    .current_page_item, .current_page_parent{
    text-decoration: none;
    }

    Ответить

    1. Я точно не помню как мы решали такую проблему, но проверьте две вещи:

      -грузится ли jquery на других страницах (можно проверить с помощью фаербага)
      -правильность подлючения jquery в wordpress, (в одной из моих статей есть пример)

      Ответить

  22. dreamhelg у меня такой вопрос.

    на сайте http://adoria.com.ua/ в шаблоне предусмотрена выпадающая менюшка, я добавил функцию

    #page-bar .current_page_item a, #page-bar .current_page_parent a {
    background: #b8db7c;
    }

    теперь активные страницы таким цветом как я хочу. Но ГЛАВНАЯ страница когда активна не выделяется. Что посоветуете?????

    Ответить

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

      В этом случае, к главной странице также будет добавлятся класс активной страницы

      wp_page_menu('titlie_li=&show_home=1')

      Ответить

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

    Ответить

  24. Вопрос, у вас сказано что для того чтобы меню после обноления страницы не раскрывалось нужно написать «display: none;» я воткнул, а он мне отказался вообще его отображать (меню), я так и не понял почему, потом использовал другой тег «visibility: hidden;» он помог, НО на следующий день таже байда меню не хочет отображаться.
    И сразу вопрос как правильно сделать дочерние меню 3 уровня (как у вас на первой картинке).

    Ответить

      1. Флетчер, я по поводу вложенности сам дорубил, а вот глюк с «display: none;» сохранился даже при вашем стиле, убираешь показывает, но раскрыто. Кто нибудь помогите, фигня какая — то.

        Ответить

  25. Сделал всё по пунктам, но не работает почему-то. До пункта 5 всё было хорошо, а вот потом не фига не работает.

    Ответить

  27. А где в настройках темы менять параметры? Допустим чтобы показывалось количество записей в каждой рубрике? (тема поддерживает) Заранее спасибо.!!

    Ответить
  28. Уведомление: UralLinux – все о Linux и не только » Post Topic » Выпадающее меню в WordPress

  29. Добрый вечер!
    Столкнулся с проблемой следующего характера: все меню выпадает как один горизонтальный столбец. Как сделать чтобы выпадал, например, квадрат из ссылок 5 на 5.
    Заранее спасибо за ответ!

    Ответить

  30. Спаисибо работает.
    Хотел спросить,я новичок просто,:
    как можно отрегулировать высоту дочерних елементов меню,основные у меня высокие 80px,
    а выпадающие хотел бы сделать меньше 37px.
    Я ЦСС ещё пока плохо знаю,где конкретно прописать,на вашем примере?

    Ответить

  34. Спасибо супер
    Хотел спросить:
    Когда находишся на странице второго уровня,нельзя сразу перейти на другую страницу второго уровня.Если только опять перейти на родительскую,тогда можно.
    А что и где надо дописать для того чтоб можно было сразу переходить на любой уровень?

    Ответить

  35. Приветствую,

    у меня не появляются дочерние ссылки.
    Подскажите что не так в коде!
    Заранее благодарен!

    Мой header.php

    <meta http-equiv="Content-Type" content="text/html; charset=» />

    jQuery(document).ready(function(){

    jQuery(«#menu li»).hover(

    function(){
    jQuery(this).find(‘ul’).show();
    },

    function(){
    jQuery(this).find(‘ul’).hide();
    }
    );
    });

    <?php
    /*
    * Print the tag based on what is being viewed.
    */
    global $page, $paged;

    wp_title( ‘|’, true, ‘right’ );

    // Add the blog name.
    bloginfo( ‘name’ );

    // Add the blog description for the home/front page.
    $site_description = get_bloginfo( ‘description’, ‘display’ );
    if ( $site_description && ( is_home() || is_front_page() ) )
    echo » | $site_description»;

    // Add a page number if necessary:
    if ( $paged >= 2 || $page >= 2 )
    echo ‘ | ‘ . sprintf( __( ‘Page %s’), max( $paged, $page ) );

    ?>

    <link rel="stylesheet" href="» type=»text/css» media=»screen» />

    Ответить

  36. Здравствуйте! Мой вопрос такой.Не мешает ли такое меню индексации сайта поисковыми система, вот тут написано http://help.yandex.ru/webmaster/?id=1108949 что навигация через скрипты нежелательна. Есть мнение по этому поводу?

    Ответить

    1. Такое меню не мешает индексации, поскольку оно присутствует на странице, просто скрыто от глаз пользователя. Навигация через скрипты в данном случае означает, что переход по ссылке инициирован ява-скриптом, а не кликом пользователя по тегу a

      Ответить

      1. А ну тогда отлично. Кстати, огромное вам спасибо за материал, сидел два дня, тема у меня немного со странностями, но все реализовал благодаря вашей инструкции. Последние сомнение по этому поводу оставляла индексация сайта ПС, но если поисковик их видит, тогда все нормально.
        Добавился в RSS, буду постоянным читателем :)

        Ответить

  37. Хороший пример. У меня вопрос? В моем шаблоне нет поддержки дополнительных меню, но я их создал при помощи функции wp _ nav _ menu. Выводится он при помощи ul id=»имя меню» и к нему прикреплены CSS. Собственно вопрос: как мне вывести выпадающее меню посредством функции: wp_nav_menu&
    Вариант с функцией wp _ list _ pages не подходит, так как нет возможности туда добавить рубрики!
    В PHP и CSS особо не силен, а реализовать очень нужно!
    Заранее спасибо!

    Ответить

  38. А у меня вопрос, «Это можно сделать в разделе head, до функции , файла header.php, следующей строчкой:», до какой функции? Я чайник в этом еще, поэтому буду признательна за помощь!

    Ответить

  40. Здравствуйте, у меня такая проблема. Тема моего сайта не поддерживает выпадающее меню. Хотелось бы создать меню в стилистике темы. Подскажите что где заменить и как связать с темой выпадающее меню. Заранее благодарю!

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *