Как использовать wp_nav_menu для создания выпадающего меню select?

Question

Как использовать wp_nav_menu для создания выпадающего меню select?

1 сент. 2011 г., 23:50:27

Просмотры: 53.2K

Голосов: 22

Я использую следующее внутри функции wp_nav_menu для создания выпадающего меню select, где каждый пункт меню является опцией в выпадающем списке...

'items_wrap' => '<select>%3$s</select>'
'before'     => '<option value="">'
'after'      => '</option>'

Как добавить значение ссылки в объявление 'before'? Есть ли лучший способ сделать это? Я знаю про wp_dropdown_pages, но это не подходит, так как я хочу, чтобы пользователи могли управлять меню через страницу "Меню".

Christopher John

765

выпадающий список выбор меню

Все ответы на вопрос

Комментарии

На самом деле, при использовании части "items_wrap" удаляются элементы списка, поэтому разметка в порядке. Но я все равно проверю ссылку. Спасибо!

Christopher John

2 сент. 2011 г. 00:01:17

да, но это не обрабатывает вложенные <UL> :)

onetrickpony

2 сент. 2011 г. 00:02:19

На самом деле обрабатывает :-)

Christopher John

2 сент. 2011 г. 00:09:27

Согласно источнику, это не работает, если только вы не используете кастомный walker...

onetrickpony

2 сент. 2011 г. 00:21:06

Это работает или нет?

chrisl-921fb74d

13 дек. 2011 г. 18:38:23

Показать остальные 7 комментариев

Я нашел это полезным:

Вы можете использовать следующие подходы для упрощения CSS кода выпадающего меню.

Добавьте класс parent для элементов, у которых есть подменю
Добавьте класс depth (depth0, depth1, depth2 ...)

Добавьте в function.php вашей темы

class DD_Wolker_Menu extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
        $GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
        $GLOBALS['dd_depth'] = (int) $depth;
        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
}
add_filter('nav_menu_css_class','add_parent_css',10,2);
function  add_parent_css($classes, $item){
     global  $dd_depth, $dd_children;
     $classes[] = 'depth'.$dd_depth;
     if($dd_children)
         $classes[] = 'parent';
    return $classes;
}

Теперь в header.php

wp_nav_menu( array( 'container_class' => '','container' => '',  'menu' => 'header-menu', 'walker'=> new DD_Wolker_Menu ) );

header-menu замените на название вашего меню

Пример CSS кода может быть таким

#menu-header-menu{
    margin: 0;
    padding: 0;
}
#menu-header-menu  ul{

}

#menu-header-menu> li{
    display: inline;
    margin-left: 1.618em;
}
#menu-header-menu  li{
    list-style: none;
}
#menu-header-menu  li a{
    text-decoration: none;
    font-size:  1em;
    font-family:    'Lato',Helvetica,Arial,sans-serif ;
    letter-spacing: 1px;
}
#menu-header-menu li.parent::after{
    content:'+';
}

#menu-header-menu  .sub-menu {
   display: none;
   position: absolute;
   background-color: #fff;
}

#menu-header-menu  li:hover>.sub-menu{
    display: inline;
    width: auto;
    height: auto;
    border: solid 1px #BBBBBB;
    z-index: +1;
}

где #menu-header-menu - ID основного UL списка (вам также нужно обновить его)

JackTheKnife

319

3 мар. 2016 г. 21:47:15

Плагин Dropdown Menus действительно отвечает на вопрос: функция wp_nav_menu не может быть использована для создания выпадающего меню в виде select, тогда как плагин предоставляет удобную функцию dropdown_menu(), которая отлично справляется с этой задачей.

Jake Rayson

111

2 авг. 2012 г. 14:17:01

onetrickpony 13.6K · Accepted Answer · 2011-09-01T23:58:47Z

Вы не можете сделать это с помощью wp_nav_menu, так как он выводит элементы списка, и ваш код создаст недопустимую разметку.

Попробуйте использовать wp_get_nav_menu_items() вместо этого.

Быстрое решение для выпадающего меню с пользовательским обработчиком (walker):

class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{

    // не выводим открывающий тег дочерних элементов (`<ul>`)
    public function start_lvl(&$output, $depth){}

    // не выводим закрывающий тег дочерних элементов    
    public function end_lvl(&$output, $depth){}

    public function start_el(&$output, $item, $depth, $args){

      // добавляем отступы к заголовку в зависимости от текущей глубины
      $item->title = str_repeat("&nbsp;", $depth * 4) . $item->title;

      // вызываем родительский метод и заменяем тег <li>
      // в сгенерированной разметке...
      parent::start_el(&$output, $item, $depth, $args);
      $output = str_replace('<li', '<option', $output);
    }

    // заменяем закрывающий </li> на закрывающий тег option
    public function end_el(&$output, $item, $depth){
      $output .= "</option>\n";
    }
}

В ваших шаблонах используйте это следующим образом:

wp_nav_menu(array(
  'theme_location' => 'primary', // укажите расположение меню в теме
  'walker'         => new Walker_Nav_Menu_Dropdown(),
  'items_wrap'     => '<select>%3$s</select>',
));