Question

我正在开发一个自适应导航菜单。我目前面临两个问题

当我缩小窗口时，我希望菜单折叠并保持关闭，除非用户点击菜单按钮。目前，菜单已打开并显示菜单链接。
无法在移动视图中隐藏菜单图标（当菜单折叠时）

如何在默认情况下关闭菜单？

以下是我面临的问题的一个例子： https://jsfiddle.net/whywymam/kf7dks3b/

我的HTML代码：

<div class="container">

              <div class="upperRow">

                   <nav class="navbar-header logoFw">
                       <div class="col-lg-4 col-md-4 col-sm-3 col-xs-4 ">
                           <a href="home.php" class="brand navbar-brand "> <img src="image/logo.png" class="img-responsive"></a>
                       </div>
                   </nav>

                   <div id="btnTopInline">

                            <ul class= "nav navbar-nav navbar-right hidden-xs">
                                <div class="col-lg-4  col-sm-3 col-md-4">    
                                       <li>
                                         <div class="indivColl">
                                                <a href="signupLogin.php">
                                                   <img src="image/jobseekerlogo.png" class="indi">
                                                   <p class="indit">Job Seeker</p>
                                                </a>
                                         </div>
                                       </li>
                                </div>

                                <div class="col-lg-4 col-sm-3 col-md-4">
                                       <li>
                                         <div class="empColl">
                                                <a href="signupLoginEmp.php">
                                                   <img src="image/employerlogo.png" class="emp">
                                                   <p class="empt">Employer</p>
                                                </a>
                                         </div>
                                       </li>
                                </div>

                            </ul>

                   </div><!-- end btnTopInline -->     

                    <div class="col-xs-4 col-xs-push-4">
                       <button type="button" class="btn btn-login visible-xs">
                            <a href="signupLogin.php">
                                Job Seeker<br>Log In
                            </a>
                        </button>
                    </div>

                   <div class="col-xs-4 pull-right">
                        <button type="button" class="btn btn-login visible-xs">
                            <a href="signupLoginEmp.php">
                                Employer<br>Log In
                            </a>
                        </button>
                   </div>
        </div>


        <div class="middleRow">

                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                <nav class="navbar-inner navbar-default navbar-static-top navcolor">

                          <div class="navbar-header ">

                              <!--button to appear when display is on mobile device-->
                              <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".nav-collapse">
                                  <span class="sr-only">Toggle navigation</span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                              </button>

                          </div>

                          <div class="nav-collapse collapse-in" id="nav-collapse">

                              <ul class="nav navbar-nav center-block">
                                <li><a href="home.php">Home<img src="image/home.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="about.php">About<img src="image/about.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="pyw.php">Prove Your Worth<img src="image/PYW.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="#">Job<img src="image/jobs.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="rescources.php">Resources<img src="image/resource.png" width="75" height="65" alt="" title="" /></a></li>
                             </ul>

                          </div>


                    </nav> <!-- end navbar-inner navbar-default navbar-static-top navcolor -->

                </div>

            </div> <!-- end middle row -->

    <nav class="navbar navbar-default navbar-fixed-bottom footer">

        <div class="container">
            <ul>
            <li><a href="about.php">About Us</a> | </li>
            <li><a href="contact.php">&nbsp; Contact Us</a> |</li> 
            <li><a href="terms&condition.php">&nbsp; Term of Use</a></li>
            </ul>
            <p class="copyright"> All Rights Reserved</p>
        </div>

    </nav>

  </div><!-- end container -->

我的CSS：

.logoFw{
width: auto;
/*    margin-bottom: 15%;*/
}

.emp {
padding-bottom: 95%;
}

.indivColl {
margin-top: -230%;
}

.empColl {
margin-top: 40%;
}

.sr-only{
position:absolute;
width:1px;
height:1px; 
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0 0 0 0);
border:0
}

.img-responsive {
max-width: 60%;
min-width: 60%;
margin-bottom: 15%;
padding-top: -3%;
}

.middleRow{
padding-top: 20%;
padding-bottom: 10%;
margin-top: 5%;
}

.navcolor{
background-color: transparent;
}

.navbar-default {
margin-top: 3%;
}

.navbar-nav {
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
text-align: center;
}

#btnTopInline{
display: inline-block;
float: right;
clear: none;
}

.moveBtnRight{
}

.btnRightSpace{
margin-right: 10%;
}

.footer{
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
}

.footer li{
display: inline;
}

.copyright{
margin-top: 1%;
}

.pull-right {
float: none!important;
}

 @media(min-width:768px) {
  .nav-collapse{
        display: inline;
  }
 }

提前致谢：）

Answer 1

原来我的导航栏未正确关闭，这就是它没有正确折叠的原因。为了解决我的第二个问题，我使用了hidden-xs

默认情况下，折叠的引导程序菜单在移动设备上打开

1 个答案: