0

I want to create mobile menu. This same menu I want to use in desktop amd mobile screen but style is a little bit diffrent. In mobile screen menu is hide but hamburger menu is display. When user click the cross in menu, this's going to close. It's very simple. On desktop screen menu is display all the time. Code look like this:

$('.hamburgermenu').on('click', function(){
$('.menu').fadeIn();
});
$('.close').on('click', function(){
$('.menu').fadeOut();
});

It works correctly but css manage to visibility too. I use @media to hide and display menu

@media(min-width: 1200px){
  .menu{
    position: relative;
    display: block;
  }
}

And this is my problem. If user close the menu (click on .close, menu doesn't display after change size of browser. For example - I'm testing my website in small window and I close the menu. After I open fullsize window, the menu won't to display.

cocool97
  • 1,201
  • 1
  • 10
  • 22
helloRoman5556
  • 163
  • 1
  • 8
  • This might be of help to you: https://stackoverflow.com/questions/9828831/jquery-on-window-resize – Arsi Nov 24 '19 at 15:25
  • Or this https://stackoverflow.com/questions/24259016/responsive-menu-show-and-hide-on-click/24259149, https://stackoverflow.com/questions/14203279/bootstrap-close-responsive-menu-on-click – el-teedee Nov 24 '19 at 15:27

2 Answers2

1

The problem is when you use fadeOut() on an element, the display of that element remains hide(look at your console and check the inline style of this element). use $(window).resize(function() {}) to remove inline styles affected by fadeOut() in sizes that you consider as media breakpoint.

Amir Amiri
  • 441
  • 1
  • 8
  • 14
0

One way would be to detect when the user changes the window size, e.g.:

$(window).resize(function(d){
    if (window.innerWidth > 1200) {
        $('.menu').fadeIn();
    }
})
Matt Simmons
  • 101
  • 3