[英]jQuery Responsive Mobile Menu
The following functions work, but it doesn't look clean and there is probably a better way to achieve what I've done. 以下功能可以正常工作,但看起来不太干净,可能有更好的方法来实现我所做的工作。 Here is what I'm trying to do: 这是我想要做的:
If the viewport is resized, even by 1px, the styles for the mobile button are removed. 如果将视口调整大小(即使调整为1像素),则将删除移动按钮的样式。 Also, the class 'active' is removed. 同样,将删除“活动”类。
On click the 'mobile-nav' element is displayed and slides down and 'active' class is added. 单击时,将显示“移动导航”元素,并向下滑动并添加“活动”类。
I try not to rely on CSS3, I'm trying to get aa :hover transition working. 我尝试不依赖CSS3,而是试图让aa:hover过渡正常工作。 So when I hover over the .menu-button
it smoothly transitions to the .menu-button:hover
styles. 因此,当我将鼠标悬停在.menu-button
它会平滑过渡到.menu-button:hover
样式。
http://jsfiddle.net/Sm5zy/11/ http://jsfiddle.net/Sm5zy/11/
// 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);
});
You are attaching to functions at the same events (window resize and menu-button click), is better to call the two functions in the same event handler like: 您要在相同事件(窗口大小调整和菜单按钮单击)上附加函数,最好在同一事件处理程序中调用这两个函数,例如:
// 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);
});
Here is a fiddle: http://jsfiddle.net/IrvinDominin/Sm5zy/12/ 这是一个小提琴: http : //jsfiddle.net/IrvinDominin/Sm5zy/12/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.