CODEWITHSUNDEEP
javascriptjquerycss
helloRoman5556
helloRoman5556

Reputation: 173

How to hide element with jQuery and css?

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.

Upvotes: 0

Views: 232

Answers (2)

Matt Simmons
Matt Simmons

Reputation: 151

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

Upvotes: 0

Amir Amiri
Amir Amiri

Reputation: 437

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.

Upvotes: 1

Related Questions