我在wp_nav_menu函数内部使用以下命令创建一个选择下拉菜单，其中每个菜单项都是选择下拉菜单中的一个选项... 

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


我如何在'before'声明中添加链接值？有没有更好的方法来解决这个问题？我知道wp_dropdown_pages，但是那不起作用，因为我希望用户能够从“菜单”页面控制菜单。

#1 楼

您无法使用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>',
));


评论

实际上，当使用“ items_wrap”部分时，它将删除列表项，因此标记是可以的。我将检查链接。谢谢！

–克里斯·莫利托（Chris Molitor）
2011年9月1日21:01在
是的，但这不能处理嵌套的
    :)

    –onetrickpony
    2011年9月1日21:02
    它实际上是:-)

    –克里斯·莫利托（Chris Molitor）
    2011年9月1日下午21:09
    根据消息来源，除非您使用自定义的助行器，否则它不会。

    –onetrickpony
    2011年9月1日21:21在
    这行得通吗？

    –chrisjlee
    2011年12月13日在16:38

#2 楼

我发现这很有用：

您可以按照任何响应来简化CSS代码dropdovn菜单。


为具有子菜单的项目添加类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;
}


现在出现在标题中.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-标识主要的UL列表（您也需要对其进行更新）

#3 楼

Dropdown Menus插件确实回答了这个问题：wp_nav_menu不能用于创建选择菜单下拉菜单，而该插件提供了出色的dropdown_menu()功能，可以出色地完成这项工作。