Auto close menu by clicking anywhere only at specific browser width

Question

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!

Answer 1

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