Created
September 3, 2016 20:00
-
-
Save codyogden/b622fcc0bb35ac1350d0e01798a65efc to your computer and use it in GitHub Desktop.
jQuery logic for a menu drawer to slide in and slide out, if click outside of the drawer, it will slide out. (Uses CSS3 Trnsition / Classes)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// When the hamburger is clicked | |
$("MENUICON").on("click", function() { | |
// Add the show class to the menu | |
$("DRAWER").addClass("show"); | |
// Add one event listener | |
$("DRAWER").one("mouseleave", function() { | |
// When the mouse leaves | |
// If the menu is visible and it is clicked | |
$("DRAWER").on("click", function( even ) { | |
// Do nothing | |
event.stopPropagation(); | |
} ); | |
// If anywhere else in the page is clicked | |
$("DRAWER").one("click", function() { | |
// Hide the menu | |
$("DRAWER").removeClass("show"); | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment