応答メニューは、私が個人的なウェブサイト上で働いている

Question

（私の英語は時々悪い場合まず、私は謝罪したいのですが、私はフランス人だけど、それは細部ですべてを説明するためにちょっと難しい）

を発行しますが、私は敏感なナビゲーションに問題があります。

私は1024px未満の画面サイズのメディアクエリを作成しました。

私が1024pxを超えると、定期的なナビゲーションバーにリストが表示されます。 私が1024px未満になると、小さなメニューロゴが表示され、その上にクリックイベントが表示され、メニュー全体が表示され消えます。

しかし、問題は、私のメニューが閉じられていて、1024ピクセルを超えるウィンドウを展開すると、リストが表示されず、その問題の対処方法がわかりません。

 <nav class="fixed_nav"> 
     <div id="nav_left"> 
      <img id="logo_nav" src="img/mini_trombi.png" alt="logo"/> 
      <p id="txt_nav">123</p> 
     </div> 
     <ul class="topnav"> 
      <div id="show_n_hide_nav" class="responsive_link_bg"> 
       <li><a id="top_nav_link" class="nav_links" href="#">ITEM 1</a></li> 
       <hr class="responsive_separator"> 
       <li><a class="nav_links" href="#">ITEM 2</a></li> 
       <hr class="responsive_separator"> 
       <li><a class="nav_links" href="#">ITEM 3</a></li> 
      </div> 
      <li class="icon"> 
       <a div id="button_nav" class="menu_icon" href="javascript:void(0);">&#9776;</a> 
      </li> 
     </ul> 
    </nav> 

jQueryのクリックのために：ここで

が私のコードで私のCSSで

$(function(){ 
    $("#button_nav").click(function() { 
     if(!$("#show_n_hide_nav").is(":visible")){ 
      $("#show_n_hide_nav").slideDown("slow"); 
     } else { 
      $("#show_n_hide_nav").slideUp("slow"); 
     } 
    }); 
}); 

、私が1024個のピクセルの下に元のリストを隠し、そしてときにjQueryの助けを借りてそれを表示しますユーザーはメニューロゴをクリックします。

また、わかりにくいのはごめんなさい。

Answer 1

、あなたはこれを試すことができますインラインスタイルに隠さ：

<li id="show_n_hide_nav" class="responsive_link_bg" style="display: none;"> 

あなたは1024以上のブロックで構成要素を強制的にこのmediaquerieを追加し、それを解決することができます：

@media (min-width:1025px) { 
    #show_n_hide_nav { 
    display: block !important; 
    } 
} 

01ウィンドウで

Check this example Fiddle

Answer 2

クラスをトグルしてCSSのトランジションを追加してスライドエフェクトを適用し、1024を超える場合は、showクラスを無視することをお勧めします。

$("#button_nav").click(function() { 
    $("#show_n_hide_nav").toggleClass("show"); 
}); 

それでもslideDown()/slideUp()を使用する場合は、$(window).resize()イベントを結合して、ウィンドウが1024pxの下/上であるかどうかを確認する必要があります。その後、要素自体にインラインdisplayプロパティを設定し、問題がjQueryのからslideUp/Down機能です

をするとき、あなたにslideUpをし、要素がまだあるブラウザのサイズを変更する：あなたは無効なHTMLを解決した後

Answer 3

$(function(){ 
    $("#button_nav").click(function() { 
     if(!$("#show_n_hide_nav").is(":visible")){ 
      $("#show_n_hide_nav").slideDown("slow"); 
     } else { 
      $("#show_n_hide_nav").slideUp("slow"); 
     } 
    }); 
}); 
$(window).resize(function(){ 
    if($(window).width() > 1024){ 
     $("#show_n_hide_nav").show(); 
    } 
}); 

を使用すると、ウィンドウのサイズをチェックして、ナビゲーションを表示する必要がサイズを変更します。