I'm looking to adapt an offcanvas menu to close when the users clicks anywhere outwith the menu. I'm using the menu from the link below, which applies an '.offcanvas-expanded' class to bring the menu into the viewport via a css transition. As it stands, the menu can only be opened/closed by clicking the '.offcanvas-toggle' button.
Menu: /
I'd like to be able to toggle this class when the user clicks anywhere on the page outwith the menu. I've attempted this with the following script (unsuccessfully), which caused the entire page to bee a trigger for the css transition.
/
jQuery(function( $ ){
$('.offcanvas-toggle').on('click', function() {
$('body').toggleClass('offcanvas-expanded');
});
$(document).click (function (e) {
if ( (e.target != $('.offcanvas')[0] ) && ( $('body').hasClass('offcanvas-expanded')) ) {
$('body').toggleClass('offcanvas-expanded');
}
});
});
Could anyone offer some advice as to how I can achieve this?
UPDATE — Full answer via @Joffutt below:
/
$(document).ready(function() {
$('.offcanvas-toggle').on('click', function() {
$('body').toggleClass('offcanvas-expanded');
});
});
$(document).click(function(e) {
if ((e.target != $('.offcanvas')[0]) && (e.target != $('.offcanvas-toggle')[0]) && ($('body').hasClass('offcanvas-expanded'))) {
var li_tags = $($('.offcanvas')[0]).find('li');
var a_tags = $($('.offcanvas')[0]).find('a');
for (var i = 0; i < li_tags.length; i++) {
if (e.target == li_tags[i] || e.target == a_tags[i]) {
return;
}
}
$('body').toggleClass('offcanvas-expanded');
}
});
I'm looking to adapt an offcanvas menu to close when the users clicks anywhere outwith the menu. I'm using the menu from the link below, which applies an '.offcanvas-expanded' class to bring the menu into the viewport via a css transition. As it stands, the menu can only be opened/closed by clicking the '.offcanvas-toggle' button.
Menu: http://slicejack./responsive-offcanvas-navigation-menu/
I'd like to be able to toggle this class when the user clicks anywhere on the page outwith the menu. I've attempted this with the following script (unsuccessfully), which caused the entire page to bee a trigger for the css transition.
https://jsfiddle/graemebryson/onz7xspq/
jQuery(function( $ ){
$('.offcanvas-toggle').on('click', function() {
$('body').toggleClass('offcanvas-expanded');
});
$(document).click (function (e) {
if ( (e.target != $('.offcanvas')[0] ) && ( $('body').hasClass('offcanvas-expanded')) ) {
$('body').toggleClass('offcanvas-expanded');
}
});
});
Could anyone offer some advice as to how I can achieve this?
UPDATE — Full answer via @Joffutt below:
https://jsfiddle/graemebryson/97zdfwvf/
$(document).ready(function() {
$('.offcanvas-toggle').on('click', function() {
$('body').toggleClass('offcanvas-expanded');
});
});
$(document).click(function(e) {
if ((e.target != $('.offcanvas')[0]) && (e.target != $('.offcanvas-toggle')[0]) && ($('body').hasClass('offcanvas-expanded'))) {
var li_tags = $($('.offcanvas')[0]).find('li');
var a_tags = $($('.offcanvas')[0]).find('a');
for (var i = 0; i < li_tags.length; i++) {
if (e.target == li_tags[i] || e.target == a_tags[i]) {
return;
}
}
$('body').toggleClass('offcanvas-expanded');
}
});
- Please check this answer http://stackoverflow./a/9438635/3886874 – Goku Commented Jan 17, 2017 at 10:39
- Thanks @Goku - I've adapted this answer to suit, but the toggle button no longer triggers the launch of the menu. I've updated the code above to show what I've got currently. – Graeme Bryson Commented Jan 17, 2017 at 11:06
- Hey @GraemeBryson can you create your example code on https://jsfiddle/ , it will be easier for me to help you. – Goku Commented Jan 17, 2017 at 11:11
- Sure, thanks @Goku - available here: jsfiddle/graemebryson/onz7xspq – Graeme Bryson Commented Jan 17, 2017 at 11:21
- 1 Hey @GraemeBryson can you check now your example https://jsfiddle/onz7xspq/2/. I updated it, let me know if you can check it. But there are other problems, if you click on some menu links it close menu...think about that... – Goku Commented Jan 17, 2017 at 12:14
2 Answers
Reset to default 5The most easy way to do it in Bootstrap 5 is to fire the click event on the close button of the offcanvas like I did in code below. I like to use plain Javascript here because jQuery is out in Bootstrap 5.
// close canvas
let closeCanvas = document.querySelector('[data-bs-dismiss="offcanvas"]');
closeCanvas.click();
Using the examples you have already provided, I have added in the functionality to not hide the offcanvas area when you specifically click on any of the links.
I added in a check inside of the on click method that specifically checks against the a-tags you have in the offcanvas area. If any of those match against the target of the click, it returns out of the method before toggling the style class.
$(document).ready(function() {
$('.offcanvas-toggle').on('click', function() {
$('body').toggleClass('offcanvas-expanded');
});
});
$(document).click(function(e) {
if ((e.target != $('.offcanvas')[0]) && (e.target != $('.offcanvas-toggle')[0]) && ($('body').hasClass('offcanvas-expanded'))) {
var li_tags = $($('.offcanvas')[0]).find('li');
var a_tags = $($('.offcanvas')[0]).find('a');
for (var i = 0; i < li_tags.length; i++) {
if (e.target == li_tags[i] || e.target == a_tags[i]) {
return;
}
}
$('body').toggleClass('offcanvas-expanded');
}
});body {
overflow-x: hidden;
}
/*
* Page wrap
*/
.page-wrap {
-webkit-transition: -webkit-transform 0.2s;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.offcanvas-expanded .page-wrap {
-webkit-transform: translateX(320px);
-ms-transform: translateX(320px);
transform: translateX(320px);
}
/*
* Offcanvas
*/
.offcanvas {
width: 320px;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
background: #fff;
z-index: 5000;
-webkit-transform: translateX(-320px);
-ms-transform: translateX(-320px);
transform: translateX(-320px);
-webkit-transition: -webkit-transform 0.2s;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.offcanvas-expanded .offcanvas {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Adapted from http://slicejack./responsive-offcanvas-navigation-menu/ -->
<div class="page-wrap">
<button class="offcanvas-toggle">Open offcanvas here</button>
<h1>Simple HTML, LESS, jQuery responsive offcanvas navigation menu</h1>
<p>This is simple offcanvas navigation menu build on HTML, LESS and jQuery. You can use it as a starter offcanvas template for your next project. If you want to see piled version of LESS just click on <i>"View Compiled"</i> button in CSS section. In CSS
there are ments that highlight what's important to include. There is a full tutorial on how to use this offcanvas navigation menu at slicejack./blog, just click on button bellow to read full article.</p>
<a href="#" class="btn">Read more on Slicejack.</a>
</div>
<!-- /.page wrap -->
<div class="offcanvas">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Blog</a>
</li>
<li><a href="#">About us</a>
</li>
<li><a href="#">Contact</a>
</li>
<li><a href="#">Twitter</a>
</li>
</ul>
</div>
<!-- /.offcanvas -->