导航折叠和关闭

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不知道你想要哪一个。如果你看看控制台上的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