bootstrap导航栏两个“汉堡包菜单”左右

Question

我真的做了我的研究，但还没有找到任何东西，我看过左侧和右侧的项目，然后在右侧或左侧折叠为“汉堡菜单”。但是我没有看到两边的两个折叠菜单，这是我想要做的。

这是我到目前为止有：

和折叠：

因此，所有的firt我想有真正的 “汉堡包菜单”在没有折叠的左边时，我尝试添加它，但我只有一条白线。

第二，我想要带有“关于我们”的文字的人物图标，但当折叠时，我只想出现人物图标。

所以最终的结果会是这样：

​​

的hamrbuger菜单就可以点击，但不会降大任菜单中上下。

这甚至有可能吗？我是新手，并且正如我在做我的研究之前所说的那样，但是却无法让任何事情变得像这样。

ps：左边的汉堡包菜单并不重要，我可以住在图形界面上。

这是我的代码：

HTML：

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <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="#"><span class="glyphicon glyphicon-book" aria-hidden="true"></span> calcular.cl</a> 
    </div> 

    <div id="navbar" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-left"> 
     <li><a href="#menu-toggle" id="menu-toggle"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span> Menú</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Acerca de nosotros</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 

和我的CSS：

.navbar { 
    margin-bottom:0px;} /* esto quita el margen del navbar*/ 
.navbar-brand { 
    transform: translateX(-50%); 
    left: 50%; 
    position: absolute; 
} 

    .navbar-default { 
    background-color: #e67e22; 
    border-color: #d35400; } 
    .navbar-default .navbar-brand { 
    color: #ecf0f1; } 
    .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { 
    color: #ffe6d1; } 
    .navbar-default .navbar-nav > li > a { 
    color: #ecf0f1; } 
    .navbar-default .navbar-nav > li > a:hover, 
    .navbar-default .navbar-nav > li > a:focus { 
    color: #ffe6d1; } 
    .navbar-default .navbar-nav .active > a, 
    .navbar-default .navbar-nav .active > a:hover, 
    .navbar-default .navbar-nav .active > a:focus { 
    color: #ffe6d1; 
    background-color: #d35400; } 
    .navbar-default .navbar-nav .open > a, .navbar-default .navbar-nav .open > a:hover, 
    .navbar-default .navbar-nav .open > a:focus { 
    color: #ffe6d1; 
    background-color: #d35400; } 
    .navbar-default .navbar-nav .open > a .caret, 
    .navbar-default .navbar-nav .open > a:hover .caret, 
    .navbar-default .navbar-nav .open > a:focus .caret { 
    border-top-color: #ffe6d1; 
    border-bottom-color: #ffe6d1; } 
    .navbar-default .navbar-nav > .dropdown > a .caret { 
    border-top-color: #ecf0f1; 
    border-bottom-color: #ecf0f1; } 
    .navbar-default .navbar-nav > .dropdown > a:hover .caret, 
    .navbar-default .navbar-nav > .dropdown > a:focus .caret { 
    border-top-color: #ffe6d1; 
    border-bottom-color: #ffe6d1; } 
    .navbar-default .navbar-toggle { 
    border-color: #d35400; } 
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { 
    background-color: #d35400; } 
    .navbar-default .navbar-toggle .icon-bar { 
    background-color: #ecf0f1; } 

    @media (max-width: 767px) { 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
    color: #ecf0f1; } 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
    color: #ffe6d1; 
    background-color: #d35400; } 
    } 

希望你不要想我懒，但是这是我的第二天要做的这个。

Answer 1

这不是一个完整的解决方案，但只有一个想法两个独立的可折叠的菜单：

1. 放入navbar-header块既肘节的按钮。
2. 将导航栏的左侧换成单独的collapse navbar-collapse块。
3. 请注意float财产。

http://codepen.io/glebkema/pen/kXAYGz

.navbar-toggle.pull-left { 
 
    margin-left: 15px; 
 
} 
 
@media (min-width: 768px) { 
 
    .pull-sm-left { 
 
    float: left !important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#collapseLeft" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapseRight" aria-expanded="false"> 
 
     <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="#">Brand</a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse pull-sm-left" id="collapseLeft"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Left 1 <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Left 2</a></li> 
 
     <li><a href="#">Left 3</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="collapseRight"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Right 1</a></li> 
 
     <li><a href="#">Right 2</a></li> 
 
     <li><a href="#">Right 3</a></li> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>