Reputation: 234
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
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
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
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