How to hide element with jQuery and css?

Question

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.

This might be of help to you: stackoverflow.com/questions/9828831/jquery-on-window-resize — Arsi
– Arsi, Commented Nov 24, 2019 at 15:25
Or this stackoverflow.com/questions/24259016/…, stackoverflow.com/questions/14203279/… — el-teedee
– el-teedee, Commented Nov 24, 2019 at 15:27

Amir Amiri · Accepted Answer · 2019-11-24 15:31:16Z

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.

answered Nov 24, 2019 at 15:31

Amir Amiri

4371 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Simmons · Accepted Answer · 2019-11-24 15:32:59Z

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

answered Nov 24, 2019 at 15:32

Matt Simmons

1611 silver badge3 bronze badges

Collectives™ on Stack Overflow

How to hide element with jQuery and css?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related