Html - open close side menu with arrow keys

Question

How would I make my side menu open when I use the arrow keys? Right arrow key opens it left arrow key closes it.

Here's the code of how my menu opens and closes:

<script>
function toggle() {
  if( document.getElementById("hidethis").style.display=='none' ){
    document.getElementById("hidethis").style.display = '';
  }else{
    document.getElementById("hidethis").style.display = 'none';
  }
</script>

I have looked into this topic but not been able to find anything that relates directly to me if you could maybe show me or point me in the right direction that would be great. I'm sure you could do this with some sort of keydown function just not sure how.

Maybe this can help you http://stackoverflow.com/questions/1402698/binding-arrow-keys-in-js-jquery — Marques, Nov 03 '13 at 14:07

score 3 · Accepted Answer · answered Nov 03 '13 at 14:36

document.addEventListener("keydown", function (e) {
    if (e.keyCode === 39)
        document.getElementById("hidethis").style.display = '';
    if (e.keyCode === 37)
        document.getElementById("hidethis").style.display = 'none';
}, false);

should do the trick.

416E64726577 · Answer 2 · 2013-12-27T17:47:43.860

Here is the Javascript code that tells if the right or left arrows have been pressed:

<!DOCTYPE html>
<html>
<head>
    <script>
        var thisKey;

        document.onkeydown = keyHit;
        var ltArrow = 37;
        var rtArrow = 39;
        function keyHit(evt) {
            if(evt) {
                thisKey = evt.which;
            } else {
                thisKey = window.event.keyCode;
            }
            if (thisKey == rtArrow) { //Right arrow key is pressed
                document.getElementById("hidethis").style.display = '';
            } else if (thisKey == ltArrow) { //Left arrow key is pressed
                document.getElementById("hidethis").style.display = 'none';
            }
        }
    </script>
</head>
<body>   
</body>
</html>

I hope this helps!

score 0 · Answer 3 · answered Nov 03 '13 at 14:00

0

Try jquery keycode av on jquery webpage In normal javascript its char

answered Nov 03 '13 at 14:00

Stefan van de Laarschot

2,154
6
30
50

Html - open close side menu with arrow keys

3 Answers3