Jquery .slideToggle() with CSS media query

Question

I have a mobile version of my website that changes according to the width, when the mobile width triggers the media query changes the menu to a drop down. The problem I am having is when a user click on the drop down and then hides it again, when expanding width to full view the menu remains hidden.

Jquery:

$(document).ready(function(){
$("#drop_button")
    .click(function(){
        $("#menu").stop();
        $("#menu").slideToggle();
    });
});

CSS:

#menu {
    width:30%;  
    float:left;
}

@media (max-device-width: 380px), (max-width: 380px){
    #menu{
        display:none;
        width:calc(100% - 20px);
        height:auto;
        padding:10px;
        font-size:1em;
    }
}

Any help would be appreciated.

Please provide your css for the full view styles of the menu — TResponse
– TResponse, Commented Jan 23, 2015 at 2:01

Roko C. Buljan · Accepted Answer · 2016-08-29 05:07:53Z

.slideToggle() is messing with the CSS's display property.

There are a couple of ways to accomplish what you need, one is to:
Style with CSS Mobile-first (the other-way-around)
and use !important to override the styles added by jQuery slideToggle:

#menu{                      /* Mobile-first */
  background:#faf;
  display:none;
  width:calc(100% - 20px);
}
#drop_button{display:block;}

@media (min-width: 380px){    /* non-mobile Media Query */
  #menu{
    display:block !important; /* override jQuery styles */
    width:30%;  
    float:left;
  }
  #drop_button{display:none;}
}

jsBin demo

You'll still have a small issue you did not mentioned, and that's:
that if you open the Menu while Mobile, than you go to Desktop and back to Mobile, the Menu will wait you opened instead of being always hidden.
To fix that you can create a $(window).on("resize", fn) listener, get the viewport size and hide the menu (if was opened before on Mobile)

P Clegg · Accepted Answer · 2015-01-23 03:15:37Z

1

Was hoping to this in CSS however I have used Jquery:

    $( window ).resize(function() {
        if ($(window).width() > 380){
            $("#menu").css("display","inline");
            //Ensure menu is always visible if the window width is larger than 380px.
        }
        else
        {
            $("#menu").css("display","none");
            //Hide the menu any time the window is resized.
        }
    });

answered Jan 23, 2015 at 3:15

P Clegg

7072 gold badges5 silver badges18 bronze badges

Collectives™ on Stack Overflow

Jquery .slideToggle() with CSS media query

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