Bootstrap导航栏折叠成2个汉堡菜单

Question

我一直在寻找和尝试很多bootstrap导航栏，但一直无法获得我正在寻找的东西。

在大屏幕上，我可以制作一个有很多内容的漂亮导航栏。 在中等屏幕上，我希望将该内容的一部分折叠到“常规菜单”中，其余部分几乎不变。 在一个小屏幕上，我想让其余部分折叠成另一个汉堡包或搜索图标，这样我在顶部栏中留下了两个可折叠菜单。 我试图做一个使用图像的模拟。

Navbar on large display

Navbar on small display

更妙的是如果在小屏幕上的菜单会从左边分别从右边动画，覆盖屏幕宽度的约70％，而不是从动画顶部覆盖100％宽度。

Answer 1

DEMO附：我试过使用bootstrap的hidden-xs或visible-lg或visible-sm类，其中很少的部分会在小设备中呈现，少量会在大设备中呈现，您将会有想法了解如何相应地修改代码。

您可以添加尽可能多的部分，并根据设备使用隐藏xs或可视化lg或可见sm的类显示他们以及更多在bootstrap官方网站查看更多。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="navbar navbar-default"> 
 
     <div class="container-fluid bg-info"> 
 
      <div class="navbar-header"> 
 
       <!--Visible on mobile device only--> 
 
       <a class="navbar-brand bg-info visible-xs pull-right" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" title="App Setting"> 
 
        <span class="glyphicon glyphicon-align-justify" style="cursor:default"></span> 
 
       </a> 
 

 
       <!--Visible on mobile device only--> 
 
       
 
        <a class="visible-xs btn navbar-brand pull-right" data-toggle="modal" href="#searchModal"> 
 
         <span class="glyphicon glyphicon-search"></span> 
 
        </a> 
 
       
 

 
       <a class="navbar-brand bg-success" style="padding-right:5px;padding-left:2px;"> 
 
        <span class="glyphicon glyphicon-home"></span> APP Name 
 
       </a> 
 

 
     
 
        
 
       
 

 

 
       
 

 
       <!--Hidden on mobile device only--> 
 
        <form action = "" method="get" role="search" class="hidden-xs navbar-form navbar-left"> 
 
         <div class="input-group"> 
 
          <input type = "search" class="form-control" name="id" placeholder="Search.."> 
 
          <span class="input-group-btn"> 
 
           <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button> 
 
          </span> 
 
         </div><!-- /input-group --> 
 
        </form> 
 

 
       
 
      </div> 
 

 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 

 
       <ul class="nav navbar-nav navbar-right"> 
 
        
 
         <li class="dropdown"> 
 
          <a href = "#" class="dropdown-toggle" data-toggle="dropdown"> 
 
           <span class="glyphicon glyphicon-user"></span> 
 
           Name<span class="caret"></span> 
 
          </a> 
 
          <ul class="dropdown-menu" role="menu"> 
 
           <li> 
 
            <a href = "" > 
 
             <span class="glyphicon glyAP glyphicon-log-out"></span> Sign out 
 
            </a> 
 
           </li> 
 
           <li> 
 
            <a href = "" ><span class="glyphicon glyphicon-wrench"></span> Change Password</a> 
 
            </li> 
 
          </ul> 
 
         </li> 
 
        
 
        <li class="dropdown"> 
 
         <a href = "#" class="dropdown-toggle" data-toggle="dropdown"> 
 
          <span class="glyphicon glyphicon-cog"></span> 
 
          <!--Visible on mobile device only--> 
 
          <span class="visible-xs-inline-block">Tools</span> 
 
         </a> 
 
         <ul class="dropdown-menu" role="menu"> 
 
          <li><a href = ""><span class="glyphicon glyphicon-stats"></span> kkk</a></li> 
 
          <li><a href = "" target="trace"><span class="glyphicon glyphicon-record"></span> dffd</a></li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 

 
    <!--Visible on mobile device only--> 
 
    <div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-hidden="true"> 
 
     <form action = "" method="get" role="search"> 
 
      <div class="iput-group input-group-lg" style="margin-top:20px;margin-left:10px;margin-right:10px;"> 
 
       <input type = "search" class="form-control" name="id" placeholder="Search....."> 
 
       <span class="input-group-btn"> 
 
        <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button> 
 
       </span> 
 
      </div><!-- /input-group --> 
 
     </form> 
 
    </div>