如何将折叠功能添加到现有的响应式菜单？

Question

我有这个菜单并且工作正常，但我希望它在移动屏幕上显示 3 行并在我单击它时隐藏和打开。如何将此功能添加到菜单中？喜欢这张图片

菜单：

http://www.bootply.com/7mGFGPnf43

Answer 1

我认为您希望在低屏幕分辨率下有一个如上图所示的工作菜单。

所以首先你需要了解 media queries 是什么。然后将媒体查询添加到您的 css 以适应低屏幕分辨率并适当设置菜单样式

Answer 2

您需要将 navbar-collapse class 和一个按钮添加到 navbar-header div。

下面将在屏幕缩小时添加汉堡图标。这被添加到 navbar-header.

    <div class="navbar-header">
        <a class="navbar-brand " href="#">MyCompany</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
         <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
    </button>
    </div>

以下内容将添加到包含菜单选项 ul 的空 div 中：

<div class="collapse navbar-collapse" id="myNavbar">

总而言之，这是将折叠较小设备上的导航栏的最终代码。

<nav style="margin-bottom:0px;border-radius:0px;border-color:white;font-size:medium;" class="navbar navbar-inverse ">
        <div class="container-fluid ">
            <div class="navbar-header">
                <a class="navbar-brand " href="#">MyCompany</a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                 <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
            </button>
            </div>

            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right text-center ">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Login</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> SignUp</a></li>
                </ul>


                <ul class="nav navbar-nav navbar-right text-center">
                    <li class="dropdown">
                        <a class="dropdown-toggle " data-toggle="dropdown" href="#">other product <span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                            <li class="text-center "><a href="#">menu1</a></li>
                            <li class="text-center "><a href="#">menu2</a></li>
                            <li class="text-center "><a href="#">menu3</a></li>
                             <li class="text-center "><a href="#">menu4</a></li>
                             <li class="text-center "><a href="#">menu5</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle a" data-toggle="dropdown" href="#">Product1<span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                           <li class="text-center "><a href="#">submenu1</a></li>
                            <li class="text-center "><a href="#">submenu2</a></li>
                             <li class="text-center "><a href="#">submenu3</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle " data-toggle="dropdown" href="#">Women <span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                            <li class="text-center "><a href="#">submenu1</a></li>
                            <li class="text-center "><a href="#">submenu2</a></li>
                             <li class="text-center "><a href="#">submenu3</a></li>
                        </ul>
                    </li>http://www.bootply.com/run#
                    <li class="dropdown">
                        <a class="dropdown-toggle " data-toggle="dropdown" href="#">Men <span class="caret"></span></a>
                        <ul class="dropdown-menu text-center">
                             <li class="text-center "><a href="#">submenu1</a></li>
                            <li class="text-center "><a href="#">submenu2</a></li>
                             <li class="text-center "><a href="#">submenu3</a></li>
                            <li class="text-center "><a href="#">submenu4</a></li>
                             <li class="text-center "><a href="#">submenu5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">HomePage</a></li>
                </ul>

            </div>
        </div>
    </nav>

如何将折叠功能添加到现有的响应式菜单？

how add collapse feature to an existing responsive menu?

collapse

nav

navbar

twitter-bootstrap