Spotify菜单引导程序（响应）

Question

是否有人使用类似菜单风格的Spotify？ https://www.spotify.com/se/

我想让菜单覆盖整页......

实施例

我正在使用Bootstrap 3。

有没有人做过类似的事情？

Answer 1

您需要根据需要修改此代码.. DEMO

<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>