如何使用wp_NAV_MENU创建选择菜单下拉菜单？

时间：2011-09-01 作者：Chris Molitor

我在wp_nav_menu 函数创建一个选择下拉菜单，其中每个菜单项都是选择下拉菜单中的一个选项。。。

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

如何在中添加链接值\'before\' 公告有没有更好的办法？我知道wp_dropdown_pages, 但这不起作用，因为我希望用户能够从“菜单”页面控制菜单。

3 个回复

最合适的回答,由SO网友:onetrickpony 整理而成

您不能使用wp\\u nav\\u菜单执行此操作，因为它输出列表项，您将使用代码生成无效的标记。

尝试使用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>\',
));

SO网友:JackTheKnife

我发现这很有用：

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

添加类parent 对于具有子菜单的项目，添加depth 类别（深度0、深度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;
}

现在在页眉中。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列表（您也需要更新）

SO网友:Jake Rayson

Dropdown Menus 插件回答了以下问题：wp_nav_menu 无法用于创建选择菜单下拉列表，而插件提供了漂亮的dropdown_menu() 出色完成工作的功能。

结束

小码农CODE

如何使用wp_NAV_MENU创建选择菜单下拉菜单？

相关推荐

WP_DROPDOWN_Categories by Date？