Create a bootstrap dropdown that occurs after pressing specific key
Dropdowns are a set of links or a list which is displayed on clicking a button or on a keyboard event. Bootstrap also comes up with a framework to implement dropdown menus. But the default bootstrap dropdown event occurs only by a mouse click.
In this article, we are going to see how to overwrite this default feature and make the bootstrap dropdown event occur after pressing a specific key.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
Let’s see the step by step implementation:
Step 1: Add the HTML code to create a button that shows Dropdown
- Link the bootstrap latest minified CSS to the HTML document.
- Add the bootstrap dropdown component framework into the HTML code.
- Create a variable and take the key-code of the specific key as an input.
- Create a function named activateDropdown() that will show the dropdown menu when called. Inside that function, we select the id named #myDropdown and toggled the state of all the classes (dropdown elements) residing inside that div. Here toggling the state simply means to hide it if it is shown and show it if it is hidden.
- Call the function when our specific key is pressed.
Explanation: Inside the output video, at first, we entered the key code of the key “Enter” which is equal to 13, then whenever we hit enter into the keyboard the dropdown event occurs. We can see that the mouse cursor is also fixed when the dropdown event occurred.