響應菜單發出

（首先我想道歉，如果我的英語不好，有時，我是法國人，所以它有點難以解釋一切細節）響應菜單發出

我工作的一個個人網站，但我的響應式導航遇到了問題。

我做了1024像素以下屏幕尺寸的媒體查詢。

當我超過1024像素，我有我的常規導航欄列表。當我在1024像素以下時，我得到了出現的小菜單徽標，並且點擊事件使整個菜單出現並消失。

但問題是，如果我的菜單關閉，我擴大我的窗口超過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的爲點擊：

$(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"); 
     } 
    }); 
});

在我的CSS，我隱藏下1024個像素的原始列表，並使用jQuery時的幫助下表現出來用戶點擊菜單標誌。

再一次，很抱歉，如果它很難理解。

來源

2016-07-06 mnX_87

除此之外......你的HTML無效'ul'元素只允許'li'作爲直接子元素 – DaniP

包括你的css也是一個好主意;-) – empiric

Woops，沒有看到！感謝DaniP！ –

後您解決無效的HTML，你可以試試這個：

的問題是從jQuery的的slideUp/Down功能設置內嵌的display屬性元素本身，那麼當你slideUp和調整瀏覽器的元素仍然是隱藏與內聯樣式：

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

你可以解決它增加這個mediaquerie給力的元素是塊超過1024：

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

Check this example Fiddle

來源

2016-07-06 19:28:25 DaniP

哦，完美！非常感謝你！ :) –

很高興幫助U @ mnX_87 – DaniP

您最好切換類並添加css轉換以進行幻燈片效果，如果您高於1024，則忽略show類。

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

如果你仍然想使用slideDown()/slideUp()，你必須綁定$(window).resize()事件，並檢查窗口高於/ 1,024像素下。

來源

2016-07-06 19:23:20

謝謝，我會盡力的！ :) –

$(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(); 
    } 
});

在窗口調整大小，你必須檢查窗口的大小和顯示導航。

來源

2016-09-05 11:43:02

響應菜單發出

回答

相關問題