Grow your CSS skills. Land your dream job.

Toggle driving me crazy in responsive design

  • # February 8, 2013 at 4:15 pm

    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.

    # February 8, 2013 at 6:56 pm

    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.

    # February 12, 2013 at 9:10 pm

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

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

    # February 13, 2013 at 3:17 am

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".