Question

我正在研究两个基于引导程序的WordPress主题，我想实现多级垂直菜单。经过几个小时的尝试，我已经成功创建了HTML / CSS中的响应式多级垂直菜单，我已经共享了以下代码。我想在WordPress导航菜单中实现它。我面临的问题是子菜单与底部的父菜单链接重叠，而不是像我创建和添加的html代码一样工作。我知道我需要使用navwalker，我尝试但无法取得成功。您能否告诉我如何在WordPress导航菜单中实现与给定代码相同的菜单功能。

<div class="container">
<div class="row">
<div class="col-sm-3">
  <div class="site-logo hidden-xs"><h2>Company Logo</h2></div>
<div class="sidebar-nav">
  <div class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="visible-xs navbar-brand">Company Logo</span>
    </div>
    <div class="navbar-collapse collapse sidebar-navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a></li>
        <li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false">Dropdown <span class="pull-right"><b class="caret"></b></span></a>
        <ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">         
            <li><a href="#">Action</a></li>
            <li><a href="#" id="btn-2" data-toggle="collapse" data-target="#submenu2" aria-expanded="false">Sub-Dropdown <span class="pull-right"><b class="caret"></b></span></a>
            <ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-2">         
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li></ul>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
        <li><a href="#">Menu Item 4</a></li>
      </ul>
    </div><!--/.nav-collapse -->
     </div>
    </div>
  </div>
  <div class="col-sm-9">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown </p>
</div>
</div>
</div>

JSFIDDEL

Answer 1

您可以通过从Bootstrap导航栏移除浮动，并在下拉菜单中设置dynamics.gp.2010.01.wsdl以及其他一些样式调整来实现所需的菜单。

然后你必须做一些JavaScript才能让嵌套的下拉菜单起作用。

这是JSFiddle。

JavaScript由W3Schools snippet提供。

WordPress Bootstrap多级垂直菜单

1 个答案: