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

Question

我一直在寻找和试验 bootstrap 导航栏，但一直无法得到我想要的东西。

在大屏幕上，我可以制作一个包含很多内容的漂亮导航栏。在中等屏幕上，我希望该内容的一部分折叠成 "general menu"，而其余部分几乎保持不变。在小屏幕上，我希望其余部分折叠成另一个汉堡包或搜索图标，因此我在顶部栏中留下了两个可折叠的菜单。我试过用图片做模型。

Navbar on large display

Navbar on small display

如果小屏幕上的菜单分别从左侧和右侧开始动画，覆盖大约 70% 的屏幕宽度，而不是从顶部开始动画，覆盖 100% 的宽度，那就更好了。

Answer 1

DEMO 附件：好吧，我尝试使用 bootstrap 的 hidden-xs 或 visible-lg 或 visible-sm classes，其中很少部分将在小型设备中呈现，很少将在大型设备中呈现，您将了解如何相应地修改您的代码。

您可以添加尽可能多的部分并根据设备使用 class 作为 hidden-xs 或 visible-lg 或 visible-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>

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

Bootstrap navbar collapse into 2 hamburger menus

menu

collapse

navbar

twitter-bootstrap