ワードプレスブートストラップマルチレベル垂直メニュー

Question

私は、マルチレベルの垂直メニューを実装したいWordPressテーマをベースにした2列のブートストラップに取り組んでいます。何時間も試した後、何とかHTML/CSSの応答マルチレベル垂直メニューを作成しました。以下のコードを共有しています。私はWordPressのnav-menuでそれを実装したいと思います。私が直面している問題は、サブメニューが、私が作成して追加したhtmlコードのように動作するのではなく、親メニューリンクを下に重ねて表示することです。私は私が試みたnavwalkerと協力する必要があるが、成功することができなかったことを知っている。 WordPressのnav-menuで指定したコードと同じメニュー機能をどのように実現することができますか教えてください。

<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

あなたは、ブートストラップのナビゲーションバーから山車を除去し、ドロップダウンメニューでposition: staticを設定することにより、目的のメニューを実現する、といくつかの他のスタイリングの微調整することができます。

次に、ネストされたドロップダウンメニューを機能させるには、少しJavaScriptを実行する必要があります。

ここにはJSFiddleがあります。

JavaScriptの礼儀。