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

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

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

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

20 голосов | спросил Chris Molitor 2 ndEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 02 Sep 2011 00:50:27 +0400 2011, 00:50:27

3 ответа


24

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

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


Быстрое решение для выпадающего меню с пользовательским ходоком:
class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{

    // don't output children opening tag (`<ul>`)
    public function start_lvl(&$output, $depth){}

    // don't output children closing tag    
    public function end_lvl(&$output, $depth){}

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

      // add spacing to the title based on the current depth
      $item->title = str_repeat("&nbsp;", $depth * 4) . $item->title;

      // call the prototype and replace the <li> tag
      // from the generated markup...
      parent::start_el(&$output, $item, $depth, $args);
      $output = str_replace('<li', '<option', $output);
    }

    // replace closing </li> with the closing option tag
    public function end_el(&$output, $item, $depth){
      $output .= "</option>\n";
    }
}

В ваших шаблонах используйте его вот так:

wp_nav_menu(array(
  'theme_location' => 'primary', // your theme location here
  'walker'         => new Walker_Nav_Menu_Dropdown(),
  'items_wrap'     => '<select>%3$s</select>',
));
ответил onetrickpony 2 ndEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 02 Sep 2011 00:58:47 +0400 2011, 00:58:47
0

Я нашел, что полезно:

Вы можете следить за любыми ответами, чтобы упростить меню dropdovn css code.

  1. Добавить класс parent для элементов, имеющих подменю
  2. добавить depth класс (глубина, глубина1, глубина2 ...)

добавить в функцию.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 3 MarpmThu, 03 Mar 2016 22:47:15 +03002016-03-03T22:47:15+03:0010 2016, 22:47:15
-1

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

ответил Jake Rayson 2 PM00000030000000131 2012, 15:17:01

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132