I'm a total beginner with jQuery and I am having a lot of trouble with a responsive website I'm designing. Their are 2 horizontal menus on the desktop site, when the screen size hits 657px and less I need the horizontal menus to become drop down menus.
I thought I had everything working until I realised that when the screen size was less than 657px and I opened and closed(toggled?) the drop down it would open and close in the larger sizes as well, which makes perfect sense but I have no idea how to stop it doing that, so basically what I need is that the drop-down that appears at sizes 657px and less toggles only, not the horizontal menus as well.
http://jsfiddle.net/4J3qU/ : my jQuery, html and css (ps i know i've misused the id's and classes in my html, i was experimenting with an idea).
Thank you for your help, i hope someone can solve this.
You want the menus only hidden using your media query which you can't do with toggle(). You can try toggleClass() and use that class to show/hide the menus in your media query.
I was having the same issues. Listening to widow width with javaScript is problematic - so I made this to figure out the lightest way this could be done. It used media queries instead of javaScript to detect window and toggleClass() and falls back from jQuery gracefully. I hope it might help!
Hello,
I'm a total beginner with jQuery and I am having a lot of trouble with a responsive website I'm designing. Their are 2 horizontal menus on the desktop site, when the screen size hits 657px and less I need the horizontal menus to become drop down menus.
I thought I had everything working until I realised that when the screen size was less than 657px and I opened and closed(toggled?) the drop down it would open and close in the larger sizes as well, which makes perfect sense but I have no idea how to stop it doing that, so basically what I need is that the drop-down that appears at sizes 657px and less toggles only, not the horizontal menus as well.
http://jsfiddle.net/4J3qU/ : my jQuery, html and css (ps i know i've misused the id's and classes in my html, i was experimenting with an idea).
Thank you for your help, i hope someone can solve this.
You want the menus only hidden using your media query which you can't do with
toggle(). You can trytoggleClass()and use that class to show/hide the menus in your media query.you want a resize fucntion, try adding some code for whatever you want in the if w > 657 statement
http://jsfiddle.net/4J3qU/1/
I was having the same issues. Listening to widow width with javaScript is problematic - so I made this to figure out the lightest way this could be done. It used media queries instead of javaScript to detect window and toggleClass() and falls back from jQuery gracefully. I hope it might help!
http://codepen.io/sheriffderek/pen/gDscn