Question

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

菜单：

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

Answer 1

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

首先，您需要了解media queries是什么。然后向您的CSS添加媒体查询以获得低屏幕分辨率并适当地设置菜单样式

Answer 2

您需要将navbar-collapse类和按钮添加到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>

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

2 个答案: