使用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的响应式菜单

回答

相关问题