[英]jQuery Responsive Mobile Menu
以下功能可以正常工作,但看起来不太干净,可能有更好的方法来实现我所做的工作。 这是我想要做的:
如果将视口调整大小(即使调整为1像素),则将删除移动按钮的样式。 同样,将删除“活动”类。
单击时,将显示“移动导航”元素,并向下滑动并添加“活动”类。
我尝试不依赖CSS3,而是试图让aa:hover过渡正常工作。 因此,当我将鼠标悬停在.menu-button
它会平滑过渡到.menu-button:hover
样式。
// Mobile Menu Button
$(window).resize(function () {
$(".menu-button").removeClass("active");
});
$(window).resize(function () {
$(".mobile-nav").removeAttr("style");
});
$(".menu-button").click(function () {
$(".menu-button").toggleClass("active");
});
$(".menu-button").click(function () {
$(".mobile-nav").slideToggle(250);
});
您要在相同事件(窗口大小调整和菜单按钮单击)上附加函数,最好在同一事件处理程序中调用这两个函数,例如:
// Mobile Menu Button
$(window).resize(function () {
$(".menu-button").removeClass("active");
$(".mobile-nav").removeAttr("style");
});
$(".menu-button").click(function () {
$(".menu-button").toggleClass("active");
$(".mobile-nav").slideToggle(250);
});
这是一个小提琴: http : //jsfiddle.net/IrvinDominin/Sm5zy/12/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.