將垂直類別菜單變爲手機上的下拉菜單

Question

在Bootstrap中將垂直類別變爲下拉漢堡包列表。我是否需要更改Bootstrap類，還是需要創建下拉菜單下面的HTML/CSS？

<div class="panel panel-default"> 
<div class="panel-heading">Categories</div> 
<div class="panel-body"><ul class="nav nav-pills nav-stacked"><li><a href="http://example.com/index.php?cPath=1">Category #1</a></li><li><a href="http://example.com//index.php?cPath=2">Category #2</a></li><li><a href="http://example.com//index.php?cPath=3">Category #3</a></li><li><a href="http://example.com/index.php?cPath=21">Category #4</a></li></ul></div> 
</div> 

Answer 1

下面一些例子，如何做到這一點的垂直類：

http://www.internetkultur.at/simple-hamburger-drop-down-menu-with-css-and-jquery/ 

這裏的水平類別的漢堡包菜單的例子：

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="navigation"> 

    <div class="container"> 
     <div class="navbar-header"> 
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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> 
     </div> 
     <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> 
      <ul class="nav navbar-nav scroll-nav" id="sortableMenuItems"> 
       <li> 
        <a href="#">Home</a> 
       </li> 
       <li> 
        <a href="#">Menu 2</a> 
       </li> 
       <li > 
        <a href="#">Menu 3</a> 
       </li> 
        <li> 
         <a href="#">Menu 4</a> 
       </li> 

      </ul> 
     </nav> 
    </div> 
</header> 

這是你能做的事做垂直的：

<div class="col-md-2"> 
      <nav class="navbar navbar-default" role="navigation"> 

       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 

       <div class="collapse navbar-collapse"> 
        <div class="panel-heading">Categories</div> 
        <ul class="nav nav-stacked"> 
         <li><a href="http://example.com/index.php?cPath=1">Category #1</a></li> 
         <li><a href="http://example.com//index.php?cPath=2">Category #2</a></li> 
         <li><a href="http://example.com//index.php?cPath=3">Category #3</a></li> 
         <li><a href="http://example.com/index.php?cPath=21">Category #4</a></li>  
        </ul> 


       </div><!--navbar-collapse --> 
      </nav> 

     </div> 

     </div>