Attempting to create a dynamic dropdown menu with animated effects triggered by a key press

I've been attempting to construct a menu that initially appears as a small icon in the corner. Upon pressing a key (currently set to click), the checkbox is activated, initiating the animation.

Most of the menu and animation are functional at this point. However, I am facing an issue with triggering it using a keypress. I intend for the activation key to be 'K,' but I've encountered difficulties making any scripts work for me. Provided below is all my code along with various attempts I've made to script the keypress functionality.

/*////////////////
// 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>

javascripthtmlcsslua

Answer №1

  • First off, the value for k should be 75 instead of 311 and you need to utilize the keydown event rather than the keypress event.
  • Additionally, within your if statement, each segment must constitute a complete test.
  • You also omitted assigning an id of start to the checkbox.
  • Lastly, there are some HTML errors (such as link elements belonging in the head section and having a closing header tag without a corresponding 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>

Answer №2

Don't forget to add the ID "start" to your checkbox. The keycode for the 'k' key is 75, and I've utilized the key down event in this case.

I opted for using addEventListener instead of directly setting event properties to allow for multiple handlers without conflicts.

Your animations are commendable! They truly enhance the visual appeal of your website.

document.addEventListener('keydown', function(e) {
  if ((e.which || e.keyCode) == 75) {
    var startElem = document.getElementById('start');
    startElem.click();
  }
});
  input[type=checkbox] {
  height: 1.5rem;
  opacity: 0;
  position: absolute;
  right: .5rem;
  top: .5rem;
  width: 1.5rem;
  z-index: 3;
}
... (CSS code continues)

<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' id="start">
  ... (HTML code continues)
</body>

</html>

Answer №3

document.addEventListener('keydown', function(event) {
  if ((event.which || event.keyCode) == 75) {
    var startElement = document.getElementById('start');
    startElement.click();
  }
});
  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' 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>
      </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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process of creating an additional coding workspace within Visual Studio Code?

I have been attempting to incorporate an about.html page into my website, but when I click the link nothing occurs. My goal is to connect it to a different workspace. Despite already completing the js and CSS aspects, the hyperlink for this about page re ...

html

How can I prevent an image from moving in relation to other objects on a webpage using HTML?

I'm currently working on my HTML website and facing a layout issue. I have an image in the center of the screen, but I want to add text beside it on the right side. Every time I try to do this, the image moves down, which is frustrating. I'm not ...

htmlcss

What is the method to execute a function on the existing page when the browser goes back?

DESCRIPTION: In order to create a seamless transition between pages on my website, I have implemented a white opaque overlay layer that fades in and out. When a user clicks on a link, a script is activated which prevents the default behavior, fades the inv ...

javascriptjquerybrowsernavigation

The validation function for email addresses in Express-validator seems to be malfunctioning

I've encountered an issue with the validation process in my code. Everything seems to be working fine except for the .isEmail method, which keeps flagging even valid email addresses as invalid. No matter how I adjust the validation rules, the problem ...

javascriptnode.jsexpressexpress-validator

When utilizing the "as" attribute, styled components do not inherit any styles

I am currently utilizing both styled-system and styled components, working on a simple scenario like the one below: const buttonFont = { fontFamily: "Chilanka" }; // define basic text styling const Text = styled.div` ${typography} ${color} `; // c ...

cssreactjsstyled-components

Adjust the positioning of two divs on mobile devices

My website has two main divs, one on the left and one on the right. The left div is styled with the classes: col-md-3 left_side And the right div with: col-md-9 right_side In the CSS file, the left_side and right_side classes only have padding, without a ...

htmlcsstwitter-bootstrapcss-floatbootstrap-4

Node.js not resetting array properly

I have successfully set up a Node+Express API that is working smoothly, but I am facing an issue with returning responses for complex queries. The problem lies in the fact that the variable where I store the response data is not being reset between differe ...

javascriptnode.jsexpressvariablesecmascript-6

Unable to activate click function in Jquery

Here is a basic HTML page snippet: <html> <head> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> <script> $(document).ready(function () { $('#test').click(); }); < ...

javascriptjquery

Is there a way to send map data using props in React?

I just want to store and pass the current props.url to the videomodal so I can show the same active video on the video modal. I can't use useState in the map. How can I pass it? Or is there any other solution? Videos.tsx ( props.url must be in the &l ...

javascriptreactjstypescriptnext.js

Looking for a PHP add-on for fpdf converter that can handle ul li tags

I need assistance with using fpdf to convert dynamic site content to pdf. The issue is that fpdf does not support ul li tags. Is there an add-on available for fpdf that supports ul li and ol li tags in html? To provide more context: The content being con ...

phphtmlpdffpdf

Can you provide instructions on executing package dependencies using yarn in the command line? For example, is there a command similar to npx tsc init for initializing a npm

When utilizing yarn, the node_modules folder is not present. Instead, dependencies are stored in a .yarn/cache folder. I attempted to use yarn dlx tsc init and npx tsc init, but they did not achieve the desired result. There are various development depend ...

javascripttypescripthadoop-yarnpackage.json

Track user sessions and transfer username to final page

Is there a way to showcase the chosen username from a dropdown menu on the initial page and then also display it on the last page without having to pass variables between pages? Additionally, if I wish to incorporate a timer on a middle page, how can I sto ...

phphtml

What steps can I take to resolve this CSS problem?

I'm trying to create a box around specific html elements, but the current code is causing each element to be enclosed individually. I don't want to use the html or body element as I have other elements that need to remain outside of the box. h1, ...

htmlcss

Control input for filtering and searching using Bootstrap

My goal is to create a search and filter user input field. I found an example on an old bootstrap page that showcases exactly what I need, but I'm facing some issues with displaying the results. Here's the Bootstrap example page. The search bar ...

cssbootstrap-4

Display issues occur with Bootstrap 4.2.1 flex-box layout columns exceeding the browser edge

Why does COLUMN02 extend beyond the browser's edge when using flex-basis for column widths? What mistake am I making? Unfortunately, it doesn't display correctly in the code snippets here but works in the fiddle. TIA! http://jsfiddle.net/dragont ...

csslayoutflexboxbootstrap-4

Aligning content within a div using Bootstrap 4

For a demonstration of this code, please visit the following Codepen link: codepen <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstr ...

htmlbootstrap-4

Answer for background picture when reducing magnification

Currently, I am facing the challenge of converting a PSD template to HTML. Specifically, I need guidance on how to handle the background food images (highlighted in red in the image) when zooming out the browser. The total width is 1300px with a container ...

htmlcss

Wordpress is having issues running jQuery

I've developed a function inside js/custom.js. The purpose of this function is to arrange posts in my Wordpress site by applying a class called articleAlign. This class will enhance the spacing between the article title and its excerpt, but only when ...

javascriptphpjquerycsswordpress

"Error: Unable to access the property '$emit' of an undefined value" - VueJS

I'm currently working on implementing a basic authentication system in vuejs. I have a set of objects containing valid usernames and passwords. I am looping through this list to validate the entered username and password. If there is a match, I trigge ...

javascriptauthenticationvue.js

Bringing the Jquery cursor into focus following the addition of an emoji

Looking to add emojis in a contenteditable div but facing an issue with the cursor placement. Here is a DEMO created on codepen.io. The demo includes a tree emoji example where clicking on the emoji adds it to the #text contenteditable div. However, after ...

javascriptjqueryhtmlcss