// Bind ESC key
$(document).keyup(function(e) {
if (e.keyCode == 27) {
if ($('#site-wrapper').hasClass('show-nav')) {
// Assuming you used the function I made from the demo
toggleNav();
}
}
});
// On DOM Ready
$(function() {
// Toggle Nav on Click
$('.toggle-nav').click(function() {
// Calling a function in case you want to expand upon this.
toggleNav();
});
});
// Function for Off Canvas Menu
function toggleNav() {
if ($('#site-wrapper').hasClass('show-nav')) {
// Do things on Nav Close
$('#site-wrapper').removeClass('show-nav');
} else {
// Do things on Nav Open
$('#site-wrapper').addClass('show-nav');
}
//$('#site-wrapper').toggleClass('show-nav');
}
MAKE THE ESCAPE KEY CLOSE THE NAV
Depending on how big your Off Canvas Menu is, it might make sense to add this feature in for your users. It’s good usability and makes a lot sense. You can add the following JavaScrip to close the nav when users hit the [esc] key.
Depending on how big your Off Canvas Menu is, it might make sense to add this feature in for your users. It’s good usability and makes a lot sense. You can add the following JavaScrip to close the nav when users hit the [esc] key.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.