Hide Menu Sidebar When Clicking Outside the Bar or the Button

Hide menu sidebar when clicking outside the bar or the button

Edit your js code to following

$('#menu-button').click(function(e){
e.stopPropagation();
$('#hide-menu').toggleClass('show-menu');
});

$('#hide-menu').click(function(e){
e.stopPropagation();
});

$('body,html').click(function(e){
$('#hide-menu').removeClass('show-menu');
});

Hope this will work.

Here is fiddle.
http://jsfiddle.net/ex8ddv5q/1/

Close sidebar menu when click outside of it and when click on menu item

The whole animation of hide/show is based off CSS so you just need to toggle the checked property of the checkbox <input type="checkbox" class="openSideMenu" id="openSideMenu">

To solve the problem of detecting click outside you can wrap the sidebar in a div and then use contains property of event object that gets emitted from the element being clicked

function hideSidebar() {  document.getElementById('openSideMenu').checked = false;}
var sideIconToggle = document.getElementById('sidebarContainer');
document.addEventListener('click', function(event) { if (!sidebarContainer.contains(event.target)) hideSidebar();});
html,body {  overflow-x: hidden;  height: 100%;}
body { background: #fff; padding: 0; margin: 0; font-family: 'Varela Round', sans-serif;}
.header { display: block; margin: 0 auto; width: 100%; max-width: 100%; box-shadow: none; background-color: black; position: fixed; height: 60px!important; overflow: hidden; z-index: 10;}
.main { margin: 0 auto; display: block; height: 100%; margin-top: 60px;}
.mainInner { display: table; height: 100%; width: 100%; text-align: center;}
.mainInner div { display: table-cell; vertical-align: middle; font-size: 3em; font-weight: bold; letter-spacing: 1.25px;}
#sideMenu { height: 100%; position: fixed; left: 0; width: 250px; margin-top: 60px; transform: translateX(-250px); transition: transform 250ms ease-in-out; background: grey; z-index: 1;}
.sideMenuInner { margin: 0; padding: 0; border-top: 1px solid black;}
.sideMenuInner li { list-style: none; color: #fff; text-transform: uppercase; font-weight: bold; padding: 20px; cursor: pointer; border-bottom: 1px solid black;}
.sideMenuInner li span { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.50);}
.sideMenuInner li a { color: #fff; text-transform: uppercase; font-weight: bold; cursor: pointer; text-decoration: none;}
input[type="checkbox"]:checked~#sideMenu { transform: translateX(0);}
input[type=checkbox] { transition: all 0.3s; box-sizing: border-box; display: none;}
.sideIconToggle { transition: all 0.3s; box-sizing: border-box; cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 22px; left: 15px; height: 22px; width: 22px;}
.spinner { transition: all 0.3s; box-sizing: border-box; position: absolute; height: 3px; width: 100%; background-color: #fff;}
.horizontal { transition: all 0.3s; box-sizing: border-box; position: relative; float: left; margin-top: 3px;}
.diagonal.part-1 { position: relative; transition: all 0.3s; box-sizing: border-box; float: left;}
.diagonal.part-2 { transition: all 0.3s; box-sizing: border-box; position: relative; float: left; margin-top: 3px;}
input[type=checkbox]:checked~.sideIconToggle>.horizontal { transition: all 0.3s; box-sizing: border-box; opacity: 0;}
input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-1 { transition: all 0.3s; box-sizing: border-box; transform: rotate(135deg); margin-top: 8px;}
input[type=checkbox]:checked~.sideIconToggle>.diagonal.part-2 { transition: all 0.3s; box-sizing: border-box; transform: rotate(-135deg); margin-top: -9px;}
#sidenav-overlay { position: fixed; top: 0; left: 0; width: 0; height: 100%; background: rgba(0, 0, 0, .1); cursor: pointer; z-index: 1;}
<div class="header"></div>
<div id="sidebarContainer"> <input type="checkbox" class="openSideMenu" id="openSideMenu">
<label for="openSideMenu" class="sideIconToggle"> <div class="spinner diagonal part-1"></div> <div class="spinner horizontal"></div> <div class="spinner diagonal part-2"></div> </label>
<div id="sideMenu"> <ul class="sideMenuInner"> <li class="active" onclick="hideSidebar()"><a href="#" data-toggle="tab">Item1</a></li> <li onclick="hideSidebar()"><a href="#" data-toggle="tab">Item2</a></li> <li onclick="hideSidebar()"><a href="#" data-toggle="tab">Item3</a></li> </ul> </div></div>

hide sidebar when click anywhere in page

I suggest to use toggleClass method and animate it by adding transition: .2s to your .menu,
working example:

$('#nav-toggle').click(function(e) {  e.stopPropagation();  $(".menu").toggleClass('bar')});$('body').click(function(e) {  if ($('.menu').hasClass('bar')) {    $(".menu").toggleClass('bar')  }})
.menu {  right: -285px;  height: 100%;  position: fixed;  width: 285px;  z-index: 1;  background-color: #111111;  transition: .2s}
.menu ul { border-top: 1px solid #636366; list-style: none; margin: 0; padding: 0;}
.menu li { border-bottom: 1px solid #636366; font-family: 'Open Sans', sans-serif; line-height: 45px; padding-bottom: 3px; padding-left: 20px; padding-top: 3px;}
.menu li a { color: white;}
.bar { right: 0px;}
body,html { height: 100%; width: 100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button id="nav-toggle">Click me</button><div class="menu">  <!-- Menu -->  <ul>    <li><a href="#">About</a></li>    <li><a href="#">Blog</a></li>    <li><a href="#">Help</a></li>    <li><a href="#">Contact</a></li>  </ul></div>

how to hide sidebar when clicking outside of sidebar?

You can do this with code below:

$('body').click(function(event){
if($(event.target).attr('id') !== "sidebar" && $(event.target).attr('id') !== "sidebarCollapse") {
$('#sidebar').removeClass('active');
$('.overlay').removeClass('active');
}
});


Related Topics



Leave a reply



Submit