I have this jquery toggle menu and currently I can only close it if I pressed the X button. What I want to achieve is to have it close using escape key as well. Would appreciate any help I can get. Below is the sample of codes used.

HTML

 <section class="menu-section">
  <div class="menu-toggle">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  <nav class="nav-hide">
        <ul role="navigation" class="hidden">
            <li><a href="#">work</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">resume</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </nav>
</section>

Here's the JS.

$(".menu-toggle").on('click', function() {
  $(this).toggleClass("on");
  $('.menu-section').toggleClass("on");
  $("nav ul").toggleClass('hidden');  
});

I have this jquery toggle menu and currently I can only close it if I pressed the X button. What I want to achieve is to have it close using escape key as well. Would appreciate any help I can get. Below is the sample of codes used.

HTML

 <section class="menu-section">
  <div class="menu-toggle">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  <nav class="nav-hide">
        <ul role="navigation" class="hidden">
            <li><a href="#">work</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">resume</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </nav>
</section>

Here's the JS.

$(".menu-toggle").on('click', function() {
  $(this).toggleClass("on");
  $('.menu-section').toggleClass("on");
  $("nav ul").toggleClass('hidden');  
});

• javascript
• jquery
• html

• 1 Possible duplicate of Close JS Menu on ESC – namzaG Commented Mar 17, 2017 at 8:47

2 Answers 2

Key code for Esc is 27, So you can ask if it pressed, and if it is, then ask if our nav ul Dont have the class hidden

$(".menu-toggle").on('click', function() {
  $(this).toggleClass("on");
  $('.menu-section').toggleClass("on");
  $("nav ul").toggleClass('hidden');  
});

$(document).keyup(function(e) {
     if (e.keyCode == 27) { // escape key maps to keycode `27`
       if (!$("nav ul").hasClass("hidden")) {$("nav ul").toggleClass("hidden")}
    }
});

.hidden{display:none}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="menu-section">
  <div class="menu-toggle">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
  </div>
  <nav class="nav-hide">
        <ul role="navigation" class="hidden">
            <li><a href="#">work</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">resume</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </nav>
</section>

Try with the keyup event: Key code for Esc is 27

$(document).ready(function(){
$(".menu-toggle").on('click', function() {
  $(this).toggleClass("on");
  $('.menu-section').toggleClass("on");
  $("nav ul").toggleClass('hidden');  
});
$("#btn").click(function(){
$("section.menu-section").toggle();
});

$(document).keyup(function(e) {
     if (e.keyCode == 27) { // escape key maps to keycode `27`
     //also check here some another stuff like menu already opend or not
       $("section.menu-section").hide();
    }
});
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="menu-section">
  <div class="menu-toggle">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  <nav class="nav-hide">
        <ul role="navigation" class="hidden">
            <li><a href="#">work</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">resume</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </nav>
</section>

<button id='btn'>HideShow Menu </button>