Twitter bootstrap 3 Spotify菜单引导（响应）

有没有人使用过类似的菜单风格来Spotify

我想要一整页的菜单

范例

我用的是bootstrap3

---

有人做过类似的事情吗？

您需要根据需要修改此代码。

<nav class="navbar navbar-inverse" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" 
         data-target="#example-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>
      <a class="navbar-brand" href="#">menu</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dogs <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span></a>
                    <ul class="dropdown-menu forAnimate" role="menu">
                          <li><a href="#">Terrier</a></li>
              <li><a href="#">Labrador</a></li>
              <li><a href="#">Pitbull</a></li>
              <li><a href="#">German Shephard</a></li>
              <li><a href="#">Chihuahua</a></li>
              <li><a href="#">Beagle</a></li>
                    </ul>
                </li>

          <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cats <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span></a>
                    <ul class="dropdown-menu forAnimate" role="menu">
                           <li><a href="#">Persian</a></li>
              <li><a href="#">Siamese</a></li>
              <li><a href="#">Ragdoll</a></li>
              <li><a href="#">Lion</a></li>
              <li><a href="#">Tiger</a></li>
                    </ul>
                </li>
           <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Primates <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span></a>
                    <ul class="dropdown-menu forAnimate" role="menu">
                          <li><a href="#">Monkey</a></li>
              <li><a href="#">Lemur</a></li>
              <li><a href="#">Gorilla</a></li>
              <li><a href="#">Chimpanzee</a></li>
                    </ul>
                </li>

           <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Reptiles <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span></a>
                    <ul class="dropdown-menu forAnimate" role="menu">
                           <li><a href="#">Boa</a></li>
              <li><a href="#">Monitor Lizard</a></li>
              <li><a href="#">Comodo Dragon</a></li>
              <li><a href="#">Iguana</a></li>
              <li><a href="#">Alligator</a></li>
                    </ul>
                </li>


      </ul>
   </div>

</nav>

切换导航

我知道如何构建引导导航-问题是在折叠菜单时，这会将整个页面向下延伸。我试着用高度和其他东西来修改navbar-collapse.in…但设计不好。我想把它扩展到整页。。