3

I've built some navigation (for mobile web) that uses the toggleClass method in jQuery to hide and reveal the menu. Clicking on the 'MENU' icon/button toggles the class '.active' (display: hidden) on and off of the menu div.

I've been desperately searching for a way to hide the menu by clicking outside of it (anywhere on the page). Currently, the only way to close the menu is to click on the MENU button again, which toggles the div back to the .active class (hidden).

I haven't been able to find any examples similar to this with a solution on how that is done.

$(document).ready(function() {
    $(".toggle-nav").click(function(e) {
        $(this).toggleClass("active");
        $(".menu ul").toggleClass("active");
 
        e.preventDefault();
    });
 
 
});
/* .toggle-nav is the menu icon/button. */

.toggle-nav {
 font-size: 20px;
 margin-left: 7px;
}

/* The .active class hides the menu by default.  
When .toggle-nav (menu icon) is clicked, .active class is 'turned off', 
revealing the menu. When clicked again, it hides the menu. */ 

.menu ul.active {
 display: none; 
}

.menu ul {
 width: 10em;
 position: absolute;
 top: 60%;
 padding: 10px 18px;
 background: #e6e5e4;
}

.menu li {
 margin: 5px 0px 5px 0px;
 float: none;
 display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="menu">

<a class="toggle-nav" href="#">MENU</a>

<ul class="active">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
</ul> 

</div>
Jed
  • 33
  • 1
  • 4

2 Answers2

1

For make this use $(document).click() for detect click on page and add stopPropagation() into $(".toggle-nav").click for make only the click menu.

Please try:

$(document).ready(function() {
    $(".toggle-nav").click(function(e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).toggleClass("active");
        $(".menu ul").toggleClass("active");
    });
 $(document).click(function(e){
      if(!e.target.closest("ul") && $(".menu a").hasClass("active")){
         $(".menu ul").toggleClass("active");
         $(".toggle-nav").toggleClass("active");
      }
    })
 
});
/* .toggle-nav is the menu icon/button. */

.toggle-nav {
 font-size: 20px;
 margin-left: 7px;
}

/* The .active class hides the menu by default.  
When .toggle-nav (menu icon) is clicked, .active class is 'turned off', 
revealing the menu. When clicked again, it hides the menu. */ 

.menu ul.active {
 display: none; 
}

.menu ul {
 width: 10em;
 position: absolute;
 top: 60%;
 padding: 10px 18px;
 background: #e6e5e4;
}

.menu li {
 margin: 5px 0px 5px 0px;
 float: none;
 display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="menu">

<a class="toggle-nav" href="#">MENU</a>

<ul class="active">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
</ul> 

</div>
P. Frank
  • 5,691
  • 6
  • 22
  • 50
0

My Html code:

<div class="click-nav">
  <ul class="no-js">
    <li>
      <a href="#" class="clicker"><img src="img/i-1.png" alt="Icon">Profile</a>
      <ul>
        <li><a href="#"><img src="img/i-2.png" alt="Icon">Dashboard</a></li>
        <li><a href="#"><img src="img/i-3.png" alt="Icon">Settings</a></li>
        <li><a href="#"><img src="img/i-4.png" alt="Icon">Privacy</a></li>
        <li><a href="#"><img src="img/i-5.png" alt="Icon">Help</a></li>
        <li><a href="#"><img src="img/i-6.png" alt="Icon">Sign out</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS :

.click-nav {margin:100px auto;width:200px;}
.click-nav ul {position:relative;font-weight:900;}
.click-nav ul li {position:relative;list-style:none;cursor:pointer;}
.click-nav ul li ul {position:absolute;left:0;right:0;}
.click-nav ul .clicker {position:relative;background:#2284B5;color:#FFF;}
.click-nav ul .clicker:hover,.click-nav ul .active {background:#196F9A;}
.click-nav img {position:absolute;top:9px;left:12px;}
.click-nav ul li a {transition:background-color 0.2s ease-in-out;-webkit-transition:background-color 0.2s ease-in-out;
-moz-transition:background-color 0.2s ease-in-out;display:block;padding:8px 10px 8px 40px;background:#FFF;color:#333;text-decoration:none;}
.click-nav ul li a:hover {background:#F2F2F2;}

/* Fallbacks */
.click-nav .no-js ul {display:none;}
.click-nav .no-js:hover ul {display:block;}

JQuery :

$(function () {
  $('.click-nav > ul').toggleClass('no-js js');
  $('.click-nav .js ul').hide();
  $('.click-nav .js').click(function(e) {
    $('.click-nav .js ul').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.click-nav .js ul').is(':visible')) {
      $('.click-nav .js ul', this).slideUp();
      $('.clicker').removeClass('active');
    }
  });
});

I have tried this and it will work very good. SO I hope this will work...

shadman031994
  • 21
  • 4