尝试构建带有动画的下拉菜单，并在按键时开始

Question

我一直在尝试构建此菜单，该菜单从角落的小图标开始，并在按键（当前单击）时激活了复选框，从而启动了动画。

我现在大部分的菜单+动画都可以使用了，我只是停留在如何通过按键激活它上。我希望键为“ K”，但似乎没有脚本适合我。这是我的所有代码，以及可以尝试帮助我编写按键脚本的所有内容。

  /*////////////////

  // Jig Dropdown //

  ////////////////*/

document.onkeypress = function(e) {

  if ((e.which || e.keyCode) == 311) { //this is the number code for the letter "K"

    document.getElementById('start').click();

    if (document.getElementById('start').className.indexOf("checkbox-checked") == -1) document.getElementById('start').className += ' checkbox-checked';

  }

};

document.onkeyup = function(e) {

  document.getElementById('start').className = document.getElementById('start').className.replace(/button\-active/g, "");

}

function start() {

  console.log("start")

}

input[type=checkbox] {

  height: 1.5rem;

  opacity: 0;

  position: absolute;

  right: .5rem;

  top: .5rem; 

  width: 1.5rem;

  z-index: 3;

}

#menu {

  background-color: #23272a;

  border-radius: 2rem 0 2rem 2rem;

  height: 2rem;

  position: absolute;

  right: .5rem;

  top: .5rem; 

  transition: .3s;

  width: 2rem;

  z-index: 1;

}

#line-one, #line-two {

  background: #949c9e;

  height: .2rem;

  position: absolute;

  right: 1rem;

  top: 1.1rem;

  transition: .3s;

  width: 1rem;

  z-index: 2;

}

#line-two {

  top: 1.6rem;

}

#icon-one, #icon-two, #icon-three {

  background: #23272a;

  border-radius: 1rem;

  height: 1.5rem;

  position: absolute;

  right: .75rem;

  top: 1rem;

  transition: .3s;

  transition-delay: .2s;

  width: 1.5rem;

  rgba(255, 255, 255, 0.3)

}

#icon-one {

  background: #949c9e;

}

.icon {

  display: inline-block;

  fill: white;

  height: 1rem;

  left: .37rem;

  position: absolute;

  top: .25rem;

  width: .8rem;

}

#icon-two {

  background: #949c9e;

}

#icon-three {

  background: #949c9e;

}

#icon-one:hover, #icon-two:hover, #icon-three:hover {

  right: 2rem;

  width: 13rem;

}

/*ANIMATION MECHANICS*/

input[type=checkbox]:checked ~ #menu {

  transform: rotate(-225deg);

}