jQuery Responsive Mobile Menu

Question

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:

1. If the viewport is resized, even by 1px, the styles for the mobile button are removed. Also, the class 'active' is removed.

2. On click the 'mobile-nav' element is displayed and slides down and 'active' class is added.

3. I try not to rely on CSS3, I'm trying to get aa :hover transition working. So when I hover over the .menu-button it smoothly transitions to the .menu-button:hover styles.

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

Answer 1

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/