Trying to build a drop down menu w/ animation start on keypress

Issue

I’ve been trying to build this menu which starts as a little icon in the corner and on keypress (currently click) the checkbox is activated and thus starts the animation.

I have most of the menu + animation working now, I’m just stuck on how to activate it with a keypress. I want the key to be ‘K’ but no script seems to work for me. Here is all my code + whatever I could find to try and help me script the keypress.

	/*////////////////
	// 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);
}
input[type=checkbox]:checked ~ #icon-one {
	animation-name: jig-one;
	animation-delay: .4s;
	animation-duration: .3s;
	transform: scale(1.3) translate(0, 2rem);
}
input[type=checkbox]:checked ~ #icon-two {
	animation-name: jig-two;
	animation-delay: .45s;
	animation-duration: .3s;
	transform: scale(1.3) translate(0, 4rem);
}
input[type=checkbox]:checked ~ #icon-three {
	animation-name: jig-three;
	animation-delay: .5s;
	animation-duration: .3s;
	transform: scale(1.3) translate(0, 6rem);
}
input[type=checkbox]:checked ~ #line-one {
	background: #949c9e;
	top: 1.35rem;
	transform: rotate(-45deg);
}
input[type=checkbox]:checked ~ #line-two {
	background: #949c9e;
	top: 1.35rem;
	transform: rotate(45deg);
}

@keyframes jig-one {
	0% {transform: scale(1.3) translate(0, 2rem)}
	33% {transform: scale(1.3) translate(0.1rem, 2rem)}
	66% {transform: scale(1.3) translate(-0.1rem, 2rem)}
	100% {transform: scale(1.3) translate(0, 2rem)}
}
@keyframes jig-two {
	0% {transform: scale(1.3) translate(0, 4rem)}
	33% {transform: scale(1.3) translate(0.1rem, 4rem)}
	66% {transform: scale(1.3) translate(-0.1rem, 4rem)}
	100% {transform: scale(1.3) translate(0, 4rem)}
}
@keyframes jig-three {
	0% {transform: scale(1.3) translate(0, 6rem)}
	33% {transform: scale(1.3) translate(0.1rem, 6rem)}
	66% {transform: scale(1.3) translate(-0.1rem, 6rem)}
	100% {transform: scale(1.3) translate(0, 6rem)}
<html>
  <head>
  	<title>Menu Animations</title>
		<!-- Fonts -->
		<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
	</head>
	<body>
		</header>
			<link rel="stylesheet" type="css" href="C:\Users\Admin\Desktop\GTARP\FXServer-new\server-data\resources\[system]\mooseWallet\html">.
				<input type='checkbox'>
				<div id="menu"></div>
				<div id="line-one"></div>
				<div id="line-two"></div>
				<div id="icon-one">
  				<image class="icon icon-image" src="https://image.flaticon.com/icons/svg/82/82479.svg">
						<symbol id="icon-image" viewBox="0 0 32 32">
						<title>image</title>
						</symbol>
					</image>					
				</div>
				<div id="icon-two">
					<image class="icon icon-image" src="https://image.flaticon.com/icons/svg/25/25246.svg">
						<symbol id="icon-image" viewBox="0 0 32 32">
						<title>image</title>
						</symbol>
					</svg>
				</div>
				<div id="icon-three">
  				<image class="icon icon-image" src="https://image.flaticon.com/icons/svg/61/61584.svg">
						<symbol id="icon-image" viewBox="0 0 32 32">
						<title>image</title>
						</symbol>
					</svg>
        </div>
			</div>
		</div>
	</body>
</html>

Solution

  • First, the code for k is 75, not 311 and you should use the
    keydown event, not the keypress event.
  • Next, in your if condition, each part needs to be a complete test.
  • Also, you didn’t have the checkbox have an id of start.
  • Lastly, you’ve got some incorrect HTML (i.e. link elements must go
    in the head section and you have a closing header tag, but no
    opening header tag).
document.addEventListener("keydown", function(e) {
console.log(e.which);
  if (e.which == 75 || e.keyCode == 75) { 
    // 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.addEventListener("keyup", 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);
}
input[type=checkbox]:checked ~ #icon-one {
	animation-name: jig-one;
	animation-delay: .4s;
	animation-duration: .3s;
	transform: scale(1.3) translate(0, 2rem);
}
input[type=checkbox]:checked ~ #icon-two {
	animation-name: jig-two;
	animation-delay: .45s;
	animation-duration: .3s;
	transform: scale(1.3) translate(0, 4rem);
}
input[type=checkbox]:checked ~ #icon-three {
	animation-name: jig-three;
	animation-delay: .5s;
	animation-duration: .3s;
	transform: scale(1.3) translate(0, 6rem);
}
input[type=checkbox]:checked ~ #line-one {
	background: #949c9e;
	top: 1.35rem;
	transform: rotate(-45deg);
}
input[type=checkbox]:checked ~ #line-two {
	background: #949c9e;
	top: 1.35rem;
	transform: rotate(45deg);
}

@keyframes jig-one {
	0% {transform: scale(1.3) translate(0, 2rem)}
	33% {transform: scale(1.3) translate(0.1rem, 2rem)}
	66% {transform: scale(1.3) translate(-0.1rem, 2rem)}
	100% {transform: scale(1.3) translate(0, 2rem)}
}
@keyframes jig-two {
	0% {transform: scale(1.3) translate(0, 4rem)}
	33% {transform: scale(1.3) translate(0.1rem, 4rem)}
	66% {transform: scale(1.3) translate(-0.1rem, 4rem)}
	100% {transform: scale(1.3) translate(0, 4rem)}
}
@keyframes jig-three {
	0% {transform: scale(1.3) translate(0, 6rem)}
	33% {transform: scale(1.3) translate(0.1rem, 6rem)}
	66% {transform: scale(1.3) translate(-0.1rem, 6rem)}
	100% {transform: scale(1.3) translate(0, 6rem)}
<html>
  <head>
  	<title>Menu Animations</title>
		<!-- Fonts -->
		<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
			<link rel="stylesheet" href="C:\Users\Admin\Desktop\GTARP\FXServer-new\server-data\resources\[system]\mooseWallet\html">    
	</head>
	<body>
				<input type='checkbox' id="start">
				<div id="menu"></div>
				<div id="line-one"></div>
				<div id="line-two"></div>
				<div id="icon-one">
  				<image class="icon icon-image" src="https://image.flaticon.com/icons/svg/82/82479.svg">
						<symbol id="icon-image" viewBox="0 0 32 32">
						<title>image</title>
						</symbol>
					</image>					
				</div>
				<div id="icon-two">
					<image class="icon icon-image" src="https://image.flaticon.com/icons/svg/25/25246.svg">
						<symbol id="icon-image" viewBox="0 0 32 32">
						<title>image</title>
						</symbol>
				</div>
				<div id="icon-three">
  				<image class="icon icon-image" src="https://image.flaticon.com/icons/svg/61/61584.svg">
						<symbol id="icon-image" viewBox="0 0 32 32">
						<title>image</title>
						</symbol>
        </div>
			</div>
		</div>
	</body>
</html>

Answered By – Scott Marcus

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.