ナビ折りたたみと閉じ

Question

私はいくつかのウェブサイトを構築しています。私はhttp://www.strv.comのようなメニューを持っていたいと思います。

私はすでにのようなコードをやった：

<div class="menu"> 
    <button id="hamburger" type="button" class="btn pull-left navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
    </button> 

    <button id="hamburger" class="btn pull-left"> 
     <span class="fa fa-bars"></span> 
    </button> 
    <ul class="list-inline nav-menu"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li class="pull-right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></li> 
    </ul> 
</div> 

<div id="mainmenu"> 
    <div class="container"> 
     <button type="button" class="close btn btn-default navbar-toggle">Close</button> 
      <ul class="nav nav-pills nav-stacked"> 
       <li><a href="#">Subitem1</a></li> 
       <li><a href="#">Subitem2</a></li> 
       <li><a href="#">Subitem3</a></li> 
       <li><a href="#">Subitem4</a></li> 
      </ul> 
    </div> 
</div> 

JSFiddle：https://jsfiddle.net/eztuhvhL/ （そこに動作していないと、なぜ知らない）、しかしそこにはトランジションエフェクトが近くにないと私はそれを解決することはできません。

また、このメニューに「Item1、Item2、Item3」を追加したいのですが、私はそれをどのように把握するのか分かりません。

ありがとうございます。

Answer 1

あなたの問題は、あなたが望むものがjqueryにわからないように、idハンバーガーのボタンが2つあることです。あなたがchromes devtoolsのようなコンソールを見ると、それをクリックすると何も起こらないことがわかります。解決策は、ハンバーガーの最初のインスタンスを取り除くことです。ここで私が得たものである：

http://codepen.io/Squeakasaur/pen/mWKzer

<div class="menu"> 


      <button id="hamburger" class="btn pull-left"> 
       <span class="fa fa-bars"></span> 
      </button> 
      <ul class="list-inline nav-menu"> 
       <li>Item 1</li> 
       <li>Item 2</li> 
       <li>Item 3</li> 
       <li class="pull-right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></li> 
      </ul> 

     </div> 

     <div id="mainmenu"> 
      <div class="container"> 
       <button type="button" class="close btn btn-default navbar-toggle">Close</button> 
       <ul class="nav nav-pills nav-stacked"> 
        <li><a href="#">Subitem1</a></li> 
        <li><a href="#">Subitem2</a></li> 
        <li><a href="#">Subitem3</a></li> 
        <li><a href="#">Subitem4</a></li> 
       </ul> 
      </div> 


    </div> 

あなたの問題を解決する必要があること。また、最初のインスタンスのIDを他のものに変更することもできます。P