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
Javascript String With New Line - But Not Using \N
How to Change Color of Ag-Grid Cells for Dynamically Changing Data
How to Show Roles of User Discord.Js/Userinfo Command
How to Find Previous or Next Element from Array in JavaScript
How to Disable Onclick Without Altering Its Function
Getting Internal Server Error (500) - Codeigniter
How to Mock Private Functions With Jest
Efficiently Replace All Accented Characters in a String
Regex With Space and Letters Only
React-Native: Application Has Not Been Registered Error
Stretch Height to Fit Content in React Native
Dynamically Increase and Decrease an Input Text Box Size Depending on Another Selector Width
How to Pass the Checked and Unchecked Value of Checkboxes in Component.Ts File in Angular