响应菜单在窗口调整大小时消失

Question

I'm a bit of a novice with script but have been trying to find a solution that fits my responsive menu solution. I've seen other people with a similar issue but they seem to be using a different method for their menus.

Here is my code:

HTML:

 function toggle_visibility(id) { var e = document.getElementById('menu-items'); if ($(e).css('display') == 'block') { $(e).slideUp('fast'); } else { $(e).slideDown('fast'); } }; 

 .mobile-menu { display: none } @media only screen and (max-width: 680px) { #menu-items { display: none } .mobile-menu { display: block; cursor: pointer; } } 

 <a onclick="toggle_visibility('menu-items');" class="mobile-menu">Menu</a> <div id="menu-items"> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> <a href="#">Link</a> </div> <!--#menu-items--> 

The menu works great but the main issue I am having is that when the user decreases the window size to show the responsive menu toggle, then uses the toggle to open and then close the menu, the menu never returns to the normal view when the window is resized back to desktop view.

Oddly it does return if the user leaves the responsive menu open in mobile view and resizes back to desktop, but not if the user closes the menu.

The only other thing I'd love to work on this menu is if the user clicks anywhere else in the page but the menu, the menu closes. At the moment the user has to click the Menu toggle link to close it.

Any help would be really appreciated!!!

Thanks so much.

Answer 1

Try this :

@media only screen and (min-width: 680px) {


 #menu-items {
    display: block
  }
  .mobile-menu {
    display: none;
    cursor: pointer;
  }

}

Answer 2

Using slideUp() and slideDown() here is a little tricky because they set/remove the inline style 'display: none;' which isn't removed when you resize the window. That's why the menu isn't reappearing: the inline style hiding the menu is still active.

What you need to do is use classes to do handle the display at different device widths and add hooks to slideUp's complete callback: ( JSFiddle )

CSS:

.mobile-menu {
    display: none
}

@media only screen and (max-width: 680px) {
    #menu-items {
        display: none
    }
    .mobile-menu {
        display: block;
        cursor: pointer;
    }
    .collapsed {
        display: none;
    }
}

@media only screen and (min-width: 681px) {
    .collapsed {
        display:block;
    }
}

JS:

function toggle_collapsed_class(e) {
    $(e).css('display', '').addClass('collapsed');
};

function toggle_visibility(id) {
    var e = document.getElementById('menu-items');
    if ($(e).css('display') == 'block') {
        $(e).slideUp('fast', function(){
            toggle_collapsed_class(e)
        });
    } else {
        $(e).removeClass('collapsed').slideDown('fast');
    }
};