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




Hope this will work.

Here is fiddle.

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:

if($(event.target).attr('id') !== "sidebar" && $(event.target).attr('id') !== "sidebarCollapse") {

Related Topics

Leave a reply