CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Encrypter
Encrypter

Reputation: 234

HTML Toggle Menu Disappearing

I have created a simple HTML menu and applied some media queries to it. I am using a Menu Hook, clicking on which brings the menu on small devices with the slideToggle in jquery. When we toggle the menu on small screen to visible and maximize the screen it works all fine, but if we toggle to hide the menu and maximize the screen with hidden menu it disappears. You can check by resizing the window in and toggling the menu. Below is the jquery I am using to toggle the menu.

$(function(){
    $("#toggle").click(function(){
        $(".t-m").slideToggle("slow");
    });
});

Here is the link to the code http://codepen.io/SurajVerma/pen/thEKp.

Thanks in advance.

Upvotes: 1

Views: 222

Answers (3)

AlexJaa
AlexJaa

Reputation: 389

You can achive this by using javascript window.innerWidth with the help of window.onresize = function(event){...}...

window.onresize = function(){

   if(window.innerWidth > 641){
     $(".t-m").slideDown("fast"); // show .t-m when screen size is > 641

   }
   if(window.innerWidth <= 640){
     $(".t-m").slideUp("fast"); // hide .t-m when screen size is <= 640
   }

}

EDITED:

See it here...

Note: don't resize your browser, just the window inside the page.

Upvotes: 2

Rahiil
Rahiil

Reputation: 110

see this. It says that - (dash) is a css selector so your .t-m means that it is sliding m element which is preceeds by .t class. Change the class name with only alphabets in it like this : .tm

Upvotes: 0

sri
sri

Reputation: 338

I think your CSS is causing this unexpected behaviour. It is assumed that the Menu element is always visible on the screen.

I have modified your css properties as follows and it works for me.

#toggle{
    float: right;
    display: inline;
}

.t-m{
    float: right;
    display: none;
}

Hope it helps.

Upvotes: 0

Related Questions