2

I've made a simple jsfiddle to show the problem:
http://jsfiddle.net/jacqueline01/rCW85/

Please resize your browser to see the dropdown/toggle menu. This simplified fiddle is created from this tutorial.

The Problem
When the dropdown/toggle menu is visible, I want it to auto-close whenever I click a link or when I click outside the menu. This should only happen when the browsers width is less then 500px. (See fiddle)

I tried to add the following:

$("html").click(function() {
    // Code to slideUp the .menu-items
});

However, this function - ofcourse - also works when the browser width is more than 500px. I can't get it to work within the < 500px JS code.

So I'm looking for a way to slideUp the menu after the mobile menu is visible by clicking anywhere inside the HTML.

Any help is apreciated. Thanks in advance!

  • Something like this http://jsfiddle.net/rCW85/7/ :) I am sure it can be improved but give it a go – Aamir Afridi Nov 19 '13 at 14:31
  • Thank you Aamir! It's almost the solution! However, after I closed the menu and resized the browser to 500+ px, the menu-items aren't visible anymore. Thanks again! –  Nov 19 '13 at 14:47
  • Try http://jsfiddle.net/rCW85/8/ although I would recommend find a way using CSS as I don't like window.resize personally. – Aamir Afridi Nov 19 '13 at 15:31
  • You just made my day, seriously! Thank you very, very much! –  Nov 19 '13 at 15:49

1 Answers1

0

Try simple css menu which is way better jsfiddle.net/rCW85/10 (check the css in external resources section. Demo at micjamking.github.io/Navigataur You just need to change the width in media query to 500

If you want to close the menu when user click outside, try this jsfiddle.net/aamir/rCW85/11

Aamir Afridi
  • 6,364
  • 3
  • 42
  • 42
  • I just discovered something weird: 1. Open the menu (toggle) when the browser is less than 500px 2. Don't close it 3. Resize the browser to see the desktop menu 4. Click on a link 5. The nav disappears. When the browser is resized after that, the nav appears again. I don't think anyone will do these actions in this order, but maybe you - or anyone else - know(s) a solution for this issue? Thanks in advance! –  Nov 20 '13 at 06:51
  • Edit: 4. Click on a link or anywhere in the document and the nav will disappear. –  Nov 20 '13 at 07:01
  • Try simple css menu which is way better http://jsfiddle.net/rCW85/10/ (check the css in external resources section. Demo at http://micjamking.github.io/Navigataur/ You just need to change the width in media query to 500 – Aamir Afridi Nov 20 '13 at 12:18
  • You're right about CSS only is a way better solution. The only thing is that the examples you've showed aren't closing whenever you click outside it. The average visitor wants to click anywhere to close the menu. The menu is for a one-page website, that's the reason why it should auto close after clicking. Thanks for your suggestion though, much apreciated! –  Nov 20 '13 at 13:27
  • You can also animate the hide and show of menu using css3 (Google it how) – Aamir Afridi Nov 20 '13 at 14:30
  • Allright this is awesome! Very clean! Thanks a lot for your time and effort Aamir, much apreciated! –  Nov 20 '13 at 14:43