Toggle driving me crazy in responsive design

[Jcse]

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.

[CrocoDillon]

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.

[elneco]

you want a resize fucntion, try adding some code for whatever you want in the if w > 657 statement

http://jsfiddle.net/4J3qU/1/

[Derek Wood]

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

[Author]

Posts