Question

在响应式菜单栏上，当页面小于1120像素时，我会关闭并打开菜单。当我点击主要导航的关闭宽度时，转到0像素。并且不会在页面大小调整时达到其先前的大小。 html和css代码如下所示。

.primary-nav li a{
color:black;
font-size:15px;
font-family:sans-serif;
}

.primary-nav .clickhere a{
    font-weight:bold;
    color:red;
}
header a img{
    padding:10px;
}
.opennav{
    display:none;
}
.primary-nav{
  width:80%;
}
@media only screen and (max-width: 1100px) {
   .primary-nav{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 5px;
    right: -0%;
    background-color: #111;
    overflow-x: hidden;
    transition: .5s;
   }
   .primary-nav li .closenav{
       color:white;
       width:250px;
       text-align:right;
       padding-right:40px;
       margin-top:10px;
       cursor: default;
   }
   .primary-nav li a{
       width:220px;
       color:wheat;
   }
   .opennav{
       display:block;
      position:fixed;
      left:91.3%;
      top:-1%;
  }
}

<!doctype html>
<html>
    <head>
        <title>bloodropes</title>
        <!--[if IE]><script src="jquery-1.7.2.min.js"></script><![endif]-->
        <meta name="title" content="Bloodropes | Homepage" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <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/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <link href="/stylesheet/home.css" rel="stylesheet" type="text/css">
        <script>
        function openNav() {
                document.getElementById("primary-nav").style.width = "250px";
       }
       function closeNav() {
               document.getElementById("primary-nav").style.width = "0px";
      }
        </script>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2">
                    <header>
                        <a href="/">
                            <img src="https://www.google.co.in/logos/doodles/2017/indias-independence-day-2017-6586914957164544-s.png" alt="bloodropes">
                        </a>
                    </header>
                </div>
                <div class="col-md-10">
                  <h1 onclick="openNav()"  class="opennav">&#9776;</h1>
                    <nav class="navbar">
                        <ul class="nav navbar-nav primary-nav " id="primary-nav" >
                          <li>
                            <h1 onclick="closeNav()"  class="closenav">&#9776;</h1>
                          </li>
                            <li>
                                <a href="/">Giving blood</a>
                            </li>
                            <li>
                                <a href="/">about blood</a>
                            </li>
                            <li>
                                <a href="/">Amazing stories</a>
                            </li>
                            <li>
                                <a href="/">News</a>
                            </li>
                            <li>
                                <a href="/">Contact us</a>
                            </li>
                            <li>
                                <a href="/">About us</a>
                            </li>
                            <li class="clickhere">
                                <a href="/">click here to give Blood</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </body>
</html>

我希望更改为在关闭时单击之前的主要宽度。

Answer 1

您可以查看使用jQuery，并使用resize函数检查浏览器是否低于1120px，类似于......

$(document).ready(function(){
            $(window).on("load resize",function(e){
                docWidth = $( document ).width();
                if(docWidth >= 1120) {
                    $( "#primary-nav").removeClass("mobile").addClass("desktop"); //set some CSS to 'desktop' class which controls desktop style
                }
                else {
                    $( "#primary-nav").removeClass("desktop").addClass("mobile"); //set some CSS to 'mobile' class which controls mobile style
                }
            });
        });

在调整窗口大小时将div更改为相同位置

1 个答案: