ウィンドウのサイズを変更するときにdivを同じ位置に変更します。

応答メニューバーの場合、ページが1120ピクセル未満で閉じると開いているメニューが表示されます。プライマリナビゲータの閉じる幅を0ピクセルに変更します。ページのサイズ変更で以前のサイズにならない htmlとcssコードは次のとおりです。ウィンドウのサイズを変更するときにdivを同じ位置に変更します。

.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>

私はそれが近くをクリックする前にあったように、主の幅に変更します。

出典

2017-08-16 sachin yadav

あなたはjQueryのを使用して見て可能性が

、およびブラウザは、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 
       } 
      }); 
     });

出典

2017-08-16 14:27:43 Matt

あなたはまた、$（ウィンドウ）を使用して見て可能性があり.width（）、私は実際に負荷時間のために普及していると思います。この例では$（document）.width（）を使用しました。これは、幅がコンソールでより良くなり、答えの文脈で何がやっているのかを理解することだけです。 – Matt

ウィンドウのサイズを変更するときにdivを同じ位置に変更します。

答えて

関連する問題