ESC to close burger nav

Hello mclaurent,

Add below code into your current child theme’s functions.php file or can use by custom plugin.


add_action( 'wp_footer', 'nav_close_by_esc' );
function nav_close_by_esc(){ ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('body').keydown(function(e) {
if (e.keyCode == 27 && $('nav.main-navigation').hasClass('toggled')) {
$('button.menu-toggle').attr('aria-expanded', 'false');
$('nav.main-navigation').removeClass('toggled');
}
});
});
</script>
<?php }


Hope this will helps you.

Thanks!

Fantastic, many thanks @addweb-solution-pvt-ltd

This works perfectly. I’ve done some digging through the W3 site but there is no conclusive solution to how the navigation should work. For instance, when you open the burger menu with your keyboard, and then tab through it, when you reach the end of the menu items and then tab again, the focus jumps out of the menu and onto the following item, but the menu remains open. I couldn’t find an example on W3 that illustrates this, as all the ones on W3 appear to use special keys to navigate the menu items (arrow keys) , and special items to open/close them (space/enter).

Any thoughts?
Cheers