Change script to hide menu on document click

Question

I'm using a piece of JS for an awesome little button I found online. The button works beautifully, but it doesn't hide the menu when I click on the page. I have to click the menu button to hide the menu again.

I've looked around a bit and see other threads like this, but my limited understanding of JS has me limited as to what I can do on my own.

    $(function() {
      var menuVisible = false;
      $('.menuBtn').click(function() {
        if (menuVisible) {
          $('.myMenu').css({'display':'none'});
          menuVisible = false;
          return;
        }
        $('.myMenu').css({'display':'block'});
        menuVisible = true;
      });
      $('.myMenu').click(function() {
        $(this).css({'display':'none'});
        menuVisible = false;
      });
    });

What do I add to this code, and how do I phrase it, to make the menu disappear when I click anywhere but the menu/button?

I only come here as a last resort. Everything I've tried breaks functionality. Thanks for your help! :)

I would suggest to attach a click handler on the document and check whether the menu is open or not then perfomr accordingly — Bkjain655
– Bkjain655, Commented May 16, 2016 at 19:24
Instead of using .css({'display':'none'}); use .hide() and .show(). In addition you can use .is to remember the visible state instead of using a variable. Remember DRY. Here's a cleaner way. — Michael Schwartz
– Michael Schwartz, Commented May 16, 2016 at 19:25
That's actually impressive, Michael. I haven't tried it, but I'm going to. It's much less code. Thank you for both the code and the wiki. — lol2dubs
– lol2dubs, Commented May 16, 2016 at 23:19

rishabh dev · Accepted Answer · 2016-05-16 19:33:44Z

1

 $(function() {
  var menuVisible = false;
  $('.menuBtn').click(function() {
    if (menuVisible) {
      $('.myMenu').css({'display':'none'});
      menuVisible = false;
      return;
    }
    $('.myMenu').css({'display':'block'});
    menuVisible = true;
  });
  $('.myMenu').click(function() {
    $(this).css({'display':'none'});
    menuVisible = false;
  });

$(document).on('click',function(e){    
  // if the click is made any where on body except .menuBtn element  
  // then hide the menubar
  if($(e.target).closest('.menuBtn').length === 0){
    $('.myMenu').css({'display':'none'});
    menuVisible = false;
  }
 });
});

.menuBtn { 
    background-color: cornflowerblue;
    font-size:1.1em;
    padding:7px 15px;
    display:inline-block;
    margin: 7px;
    border-radius:6px;
    border:solid rgba(0,0,0,0.2);
    border-width:1px 1px 5px;
    box-shadow:0 5px 0 rgba(0,0,0,0.1),
    inset 0 0 3px rgba(255,255,255,0.3);
    cursor:pointer;
    transition:0.4s ease;
        }

.menuBtn:hover { 
    transform:translateY(-3px); 
    box-shadow:0 6px 0 rgba(0,0,0,0.1), inset 0 0 1px rgba(255,255,255,0.4); 
    border-bottom-width:8px; }
        
.menuBtn:active { transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,0.1), inset 0 0 5px rgba(255,255,255,0.4); border-bottom-width:2px; transition:0.1s ease; }

.wrapper {
    
    position: relative;
    display: inline-block;
}

.myMenu {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
}

.myMenu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.myMenu a:hover {background-color: cornflowerblue; color: yellow;}

.wrapper:hover  {
    display: block;
}
.myMenu {
    display: none;
}

.menuBtn:hover .menuBtn {
    background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <button class="menuBtn"></button>
  <div class="myMenu">
    <a href="#">Login</a>
    <a href="#">Register</a>  
    <a href="#">About Us</a>
    <a href="#">About the Crate</a>
    <a href="#">About Us</a>
</div>
</div>

edited May 16, 2016 at 19:33

answered May 16, 2016 at 19:10

rishabh dev

1,7631 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lol2dubs Over a year ago

jsfiddle.net/kkm7s1hg - this is working without your code ::: jsfiddle.net/59e9cgne - this is not working with your code

lol2dubs Over a year ago

This solution works. It may not be the most efficient here, but it is the simplest for me to understand given my limited knowledge.

Diego Flávio · Accepted Answer · 2016-05-16 19:08:56Z

0

I do not know if I understand well , more would be what you need:

http://www.w3schools.com/howto/howto_js_dropdown.asp

answered May 16, 2016 at 19:08

Diego Flávio

1

Comments

Mohamed-Yousef · Accepted Answer · 2016-05-16 20:53:55Z

simply you can use this function

// when click on window
    function actionwindowclick(elem , action){
        $(window).on('click',function(e){
            if (!$(elem).is(e.target) // if the target of the click isn't the container...
                && $(elem).has(e.target).length === 0) // ... nor a descendant of the container
            {
                action();
            }
        });
    }

and use it inside $(function(){}); like

actionwindowclick('.myMenu , .menuBtn' , function(){
    $('.myMenu').hide();
});

your full code should be something like this

    $(function() {
          $('.menuBtn').click(function() {
              $('.myMenu').slideToggle(0);
          });
          $('.myMenu').click(function() {
            //$(this).hide();
          });

          actionwindowclick('.myMenu , .menuBtn' , function(){
               $('.myMenu').hide();
          });
   });
   // when click on window
        function actionwindowclick(elem , action){
            $(window).on('click',function(e){
                if (!$(elem).is(e.target) // if the target of the click isn't the container...
                    && $(elem).has(e.target).length === 0) // ... nor a descendant of the container
                {
                    action();
                }
            });
        }

Collectives™ on Stack Overflow

Change script to hide menu on document click

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related