Skip to content

Instantly share code, notes, and snippets.

@jserrao
Last active May 25, 2021 20:24
Show Gist options
  • Save jserrao/58643a43fa5bd65fd6b1f3dcced7b60c to your computer and use it in GitHub Desktop.
Save jserrao/58643a43fa5bd65fd6b1f3dcced7b60c to your computer and use it in GitHub Desktop.
Click anywhere to close an active off-canvas menu
/* SCROLL CHECKER
*
* Description:
* This function scans all incoming clicks.
* This allows users to easily click outside an active offcanvas menu.
*
*
* Usage:
* This function analyzes the kinds of clicks that could come a page and an offcanvas menu.
* It's checking for a hamburger menu, a menu closing mechanism, links in a menu and links on a page
* Each click should do what you think it does with this function.
*
*
* Params:
* none - just include and roll my friends
*
*
* HTML Structure
* This is designed to work with HTML that looks kinda like this
* <aside id="sidebar-wrapper">
* <div class="sidebar-title-container">
* <div class="sidebar-title">Menu</div>
* <div class="sidebar-close" id="sidebar-hard-close">
* <img src="images/close-white.png" id="sidebar-close-icon" alt="Close this sidebar menu by clicking the X">
* </div>
* </div>
* <ul class="sidebar-nav">
* <a href="#"><li>Home</li></a>
* <a href="#"><li class="active">Issues</li></a>
* <a href="#"><li>Features</li></a>
* <a href="#"><li>Departments</li></a>
* <a href="#"><li>Sponsors</li></a>
* <a href="#"><li>About</li></a>
* <a href="#"><li>Contact Us</li></a>
* </ul>
* </aside>
*/
function scrollChecker () {
// 1- Analyze all clicks on the document, only true way to make sure we can close sidebar on any click
$(document).click(function(event) {
// 2 - If it's a regular anchor tag, handle the anchor tag as a regular ahref redirect
if( $(event.target).closest('a').length ){
// 3- Makes sure element clicked actually has ahref
if(event.target.getAttribute('href') !== null) {
window.location.href = event.target.getAttribute('href');
}
// 4- If we don't have a link, it usually means the link is in the parent element
else {
var linkContainer = $(event.target).parent("a");
window.location.href = linkContainer[0].getAttribute('href');
}
}
// 5- If user clicks inside of menu on X, close the menu
if( event.target === $('#sidebar-hard-close').get(0) || event.target === $('#sidebar-close-icon').get(0)) {
$('#sidebar-wrapper').removeClass("activated");
$(".hamburger-line-1, .hamburger-line-2, .hamburger-line-3").removeClass("activated");
}
// 6- Check click event to make sure we aren't clicking inside sidebar AND make sure we aren't clicking the actual sidebar open button
if(!$(event.target).closest('#sidebar-wrapper').length === true && event.target !== $('.header-hamburger-menu').get(0) && event.target !== $('.hamburger-line-1').get(0) && event.target !== $('.hamburger-line-2').get(0) && event.target !== $('.hamburger-line-3').get(0)){
event.preventDefault();
$('#sidebar-wrapper').removeClass("activated");
$(".hamburger-line-1, .hamburger-line-2, .hamburger-line-3").removeClass("activated");
}
// 7- Check event.target and make sure we are clicking the actual hamburger menu
if(event.target === $('.header-hamburger-menu').get(0) || event.target === $('.hamburger-line-1').get(0) || event.target === $('.hamburger-line-2').get(0) || event.target === $('.hamburger-line-3').get(0)){
// 8- Then we check to make sure the click of the menu is to close, if so - then we close
if( $(".hamburger-line-3.activated").length ) {
$('#sidebar-wrapper').removeClass("activated");
$(".hamburger-line-1, .hamburger-line-2, .hamburger-line-3").removeClass("activated");
// 9- If menu click isn't to close, it must be to open, so we open it now
} else {
event.preventDefault();
$('#sidebar-wrapper').addClass("activated");
$(".hamburger-line-1, .hamburger-line-2, .hamburger-line-3").toggleClass("activated");
$(".header-sidebar-close").delay(1000).toggleClass("activated");
}
}
});
}
scrollChecker();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment