Wordpress 多级下拉菜单

Question

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

Answer 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;
}

当然你需要做出自己的改变。

Answer 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
}

Wordpress 多级下拉菜单

Wordpress multi level dropdown menu

css

php

wordpress

drop-down-menu