June 10, 2022 CSS

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 Cancel reply