2

I am making my own responsive navigation from this tut: http://www.hongkiat.com/blog/responsive-web-nav/

This is my fiddle: http://jsfiddle.net/2Pqch/

When window is minimized and you press the open/close btn I would like to be able to close it either by clicking the button or by clicking outside the nav.

How can this function be added?

Here is the script:

$(function() {
            var pull        = $('.btn');
                menu        = $('nav ul');
                menuHeight  = menu.height();

            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });

            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });
        });
DWTBC
  • 285
  • 5
  • 24

2 Answers2

0

You could do something like this:

http://jsfiddle.net/2Pqch/1/

I added e.stopPropagation(); to stop the event from bubbling up and also added 

       $(document).on('click',function(e){
            if(!menu.is(":hidden")){
                menu.slideToggle();
            }
        });

It checks to see if the menu is hidden or not, if it is not hidden clicking on the document will close the menu again. A better way to do this might be to target a content container to prompt the close, since clicking anywhere on the document will close it.

Rchristiani
  • 424
  • 3
  • 18
  • I just tested this this on my iPhone and the click event outside, doesn't seem to work? – DWTBC Apr 18 '13 at 17:05
  • The click event outside isn't working properly. It closes the main nav also – DWTBC Apr 19 '13 at 13:00
  • @DWTBC You can add a check: `if(window.innerWidht <= 600) {do the menu stuff}` That way it is not triggered when you are showing the full menu. – Rchristiani Apr 19 '13 at 16:41
  • @DWTBC something like this http://jsfiddle.net/2Pqch/12/ would work, obviously you would have to change it to fit you needs. – Rchristiani Apr 19 '13 at 20:19
  • @Rchristiani... Sorry for all my trouble, but yeah it fixed it when window is fullscreen, but when you click one of the menus it still closes, and the click outside doesn't work on iPhone. Can this be fixed, or should I just settle? – DWTBC Apr 19 '13 at 20:41
  • @DWTBC You will be looking at something like this http://stackoverflow.com/questions/7018919/how-to-bind-touchstart-and-click-events-but-not-respond-to-both/7019461#7019461 And when you say "click one of the menus" do you mean an option on the menu? Would that not close it anyways, since you would navigate to another page. – Rchristiani Apr 22 '13 at 18:13
  • Well it is actually the whole nav-bar that triggers it to close – DWTBC Apr 23 '13 at 10:34
  • @DWTBC yes that is because in that fiddle I am targeting the `document`, and the menu is a child of the `document`. You might want to try something like ` $('.content').on('click',function(e){...` Instead. That way when you click the menu bar the menu does not close. – Rchristiani Apr 23 '13 at 13:37
0

Detect if it's clicked on Nav or on Window, if clicked on Nav, Toggle the Nav.
Else if Nav is opened & clicked on Window, Toggle the Nav.

      Demo http://jsfiddle.net/2Pqch/2/

var clickedOnMenu = false;              

$(pull).on('click', function(e) {
    e.preventDefault();
    clickedOnMenu = true;                     
        });

    $(window).on('click', function(e) {

        if(clickedOnMenu)
        {
            menu.slideToggle();
            clickedOnMenu = false;
        }
        else if ((menu).is(":visible")) {
        menu.slideToggle();
      } 
    });
VenomVendor
  • 15,064
  • 13
  • 65
  • 96