ウィンドウを使用したレスポンスバーのリサイズ

Question

効率的なウィンドウリサイズ手法のご提案はありますか？私は反応的なナビゲーションバーをやっています。 480px未満の場合は、ナビゲーションを切り替えて最小化 - 表示を非表示に設定します。画面を480以上に拡大すると、ナビゲーションは隠れた状態にとどまります。これを修正するために、ウィンドウのサイズ変更機能を追加しました。画面が480を超えると、リストは初期値に戻ります。これが大幅に改善され、多くのパフォーマンスを無駄にしているような気がします。

<div class = "dropdown"> 
     <div class = "icon"> 
      <img src ="menu.png" class = "text" align = "right"> 
     </div> 
     <ul class = "header-li"> 
      <li><a href ="#1">1</a></li> 
      <li><a href ="#2">2</a></li> 
      <li><a href="#3">3</a></li> 
      <li><a href="#4">4</a></li> 
     </ul> 
    </div> 


$(".icon").click(function(){ 
    $(".header-li", ".dropdown").slideToggle(); 
}); 


$(window).on('resize',function(event){ 
    var windowSize = $(this).width(); 

    if (windowSize > 480){ 
     $(".header-li").css('display',''); 
    } 
}); 

Media query max 480px 

display icon 
list display:none; 

Answer 1

window.resizeのご使用は正しいですが、しかし、あなたはまた、ウィンドウが戻ってダウン縮小後のスタイルを置き換えるためelse条件を追加したいと思うでしょう。

しかし、私は比較の方がはるかに効率的で、純粋なCSSで行うことができるため、メディアクエリを使用することをお勧めします。

以下のスニペットを実行して[フルスクリーン]をクリックし、ブラウザウィンドウのサイズを変更してデモを表示します。

/* The default view (in this case, for mobile) */ 
 
.header-li { 
 
    background: red; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
/* When the window is greater than 480px wide */ 
 
@media only screen and (min-width: 480px) { 
 
    .header-li { 
 
    background:green; 
 
    } 
 
}

<div class="header-li"> </div>

よりおよそMedia Queries

学びます