P Clegg P Clegg - 3 months ago 23
CSS Question

Jquery .slideToggle() with CSS media query

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.

Answer

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.
        }
    });
Comments