使用CSS3的響應式菜單

我嘗試使用過渡創建響應式菜單。我創建通過的jsfiddle一個可以在這裏找到：使用CSS3的響應式菜單

的JS我使用：

$(document).ready(function(){ 
$(".menu-button").click(function() { 
    if ($(".menu").hasClass('close')) { 
      $(".menu").removeClass('close').addClass('open'); 
     } 
    else if ($(".menu").hasClass('open')) { 
      $(".menu").removeClass('open').addClass('close'); 
     } 
}); 
});

我的問題是，
是否有可能有這樣的菜單，沒有調整窗口寬度方式時出現的簡短轉換。

我的目標是有下滑，而無需使用CSS的響應菜單！重要（我發現使用toggleSlide需要這個？

來源

2013-11-24 DavidPottrell

是的，我認爲slideToggle()是你最好的選擇，所以你也可以刪除CSS transition影響的窗口大小調整。

在你的CSS刪除這兩個.open{}和.close{}風格，然後在你的.menu添加display:none和top:50px（黑.box-menu高度）。

然後你的腳本是：

$(document).ready(function(){ 
    $(".menu-button").click(function(){ 
     $('.menu').slideToggle(); 
    }); 
});

看到這個jsfiddle

來源

2013-11-25 00:43:00

這個問題是，一旦你切換它，然後調整窗口的大小。顯示：none仍然存在，因此沒有菜單出現：/ – DavidPottrell

這是一個快速解決方案

$(window).on("resize",function(event){ 
    $(".menu").css("display","none"); 

}) 
$(window).on("debouncedresize",function(event){ 
    $(".menu").css("display","block"); 

})

只包括你的文檔中去抖調整大小腳本： https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js

它我花了一點時間找到一個反彈調整大小的解決方案。

http://jsfiddle.net/prollygeek/FN37X/5/

來源

2013-11-25 01:05:45 ProllyGeek

完美無缺，但由於超時而調整大小時，菜單會閃爍？ – DavidPottrell

現在好了，應該工作沒有閃爍。 – ProllyGeek

我很感激這個幫助，雖然對於這樣一個小小的'功能'來說似乎是一個瘋狂的代碼量！哇！ – DavidPottrell

使用CSS3的響應式菜單

回答

相關問題