Wordpress 多级下拉菜单答案

【问题标题】：Wordpress multi level dropdown menuWordpress 多级下拉菜单
【发布时间】：2015-06-22 07:36:41
【问题描述】：

我为我的网站创建了一个自定义主题。在这里，我想创建一个多级下拉菜单，我使用仪表板完成了它，但只出现了下拉菜单。

【问题讨论】：

尝试在wp_nav_menu()中添加'depth' => 0
@VidyaNair 在哪里？在functions.php中？
不检查你在哪里调用了 wp_nav_menu 函数，我在 header.php 中？
@VidyaNair 是的，我在 header.php 中编码，这是我的代码 <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>
@VidyaNair 仍然无法正常工作<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header', 'depth' => 0 ) ); ?>

【解决方案1】：

这就是你编写菜单的方式应该用代码编写：

<div id="top-menu">
    <ul>
        <?php wp_nav_menu(array('theme_location'=>'top-menu','container'=>'', 'items_wrap' => '%3$s')); ?>
    </ul>
</div>

上面的代码会被翻译成类似这样的：

<div id="top-menu">
            <ul>
                <li><a href="#somelink">Some Text</a></li>
                <li><a href="#somelink">Some Text</a></li>
                <li>
                    <a href="#somelink">Some Text</a>
                    <ul>
                        <li><a href="#secondLevel">Second Level Text</a></li>
                        <li><a href="#secondLevel">Second Level Text</a></li>
                        <li>
                            <a href="#secondLevel">Second Level Text</a>
                            <ul>
                                <li><a href="#thirdLevel">Third Level Text</a></li>
                                <li><a href="#thirdLevel">Third Level Text</a></li>
                                <li><a href="#thirdLevel">Third Level Text</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

如果尚未添加到您的functions.php中，您需要添加以下代码：

add_theme_support( 'menus' );
if ( function_exists( 'register_nav_menus' ) ) {
    register_nav_menus(
        array(
            'top-menu' => 'Top Menu'
            )
        );
}

那么您的 css 文件应包含以下内容：

#top-menu {
  background:#F4F4F4;
  height:50px;
  width:100%;
}
#top-menu ul {
}
#top-menu ul li {
  display:inline-block;
  float:left;
  position:relative;
}
#top-menu ul li a {
  color:#929292;
  display:inline-block;
  height:50px;
  text-align:center;
  text-decoration:none;
  font-weight:bold;
  width:130px;
  line-height:50px;
  border-right:#E4E4E4 1px solid;

}
#top-menu ul li ul li a {
  width:200px;
}
#top-menu ul li.current-menu-item > a, #top-menu ul li:hover > a {
  color:#000;
}
/*===>multi level menu */
#top-menu li ul {
  display:none;
  position:absolute;
  left:0;
  border:1px solid #ccc;
  z-index:300;
  width:200px;
  background:#f0f0f0;
}
#top-menu li:hover > ul {
  display:block;
}
#top-menu li ul ul {
  left:140px;
  top:10px;
}
#top-menu li li a {
  border:0;
  border-bottom:1px solid #ccc;
  width:150px;
}

当然，您需要自己进行更改。

【讨论】：

【解决方案2】：

STEP - 1: Register your menu in **function.php** Which wants to add your show.
function register_my_menu() {
    register_nav_menu('header_menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

STEP - 2:
Download wp_nav_walker from this url: https://github.com/wp-bootstrap/wp-bootstrap-navwalker

STEP - 3:
wp_nav_menu(
    array(
        'theme_location' => 'header_menu',
        'menu_class' => 'navbar-nav ml-auto',
        'container' => 'div',
        'container_class' => 'collapse navbar-collapse',
        'container_id' => 'navbarNav',
        'depth' => '3',
        'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
        'walker' => new WP_Bootstrap_Navwalker(),
    )
);

STEP - 4: add this css code in style.css file
ul.dropdown-menu li > ul.dropdown-menu{
    left: 100%;
    top: 0;
}

ul.dropdown-menu li:hover > ul.dropdown-menu, ul.dropdown-menu li:focus > ul.dropdown-menu{
    display: block
}

【讨论】：