How To Create Click Dropdown Using Javascript, Html, And Css

What is a Dropdown?

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

Steps On How To Create Click Dropdown Using Javascript, Html, And Css

Step 1 Add HTML:

<div class=”dropdown”>

<button onclick=”myFunction()” class=”dropbtn”>Dropdown</button>

<div id=”myDropdown” class=”dropdown-content”>

<a href=”#”>Link 1</a>

<a href=”#”>Link 2</a>

<a href=”#”>Link 3</a>

</div>

</div>

Step 2  Add CSS:

.dropbtn {

background-color: #4CAF50;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

}

 

/* Dropdown button on hover & focus */

.dropbtn:hover, .dropbtn:focus {

background-color: #3e8e41;

}

/* The container <div> – needed to position the dropdown content */

.dropdown {

position: relative;

display: inline-block;

}

/* Dropdown Content (Hidden by Default) */

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

 

/* Links inside the dropdown */

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

Step 3  Add JavaScript:

function myFunction() {

document.getElementById(“myDropdown”).classList.toggle(“show”);

}

 

// Close the dropdown menu if the user clicks outside of it

window.onclick = function(event) {

if (!event.target.matches(‘.dropbtn’)) {

 

var dropdowns = document.getElementsByClassName(“dropdown-content”);

var i;

for (i = 0; i < dropdowns.length; i++) {

var openDropdown = dropdowns[i];

if (openDropdown.classList.contains(‘show’)) {

openDropdown.classList.remove(‘show’);

}

}

}

}

 

 


P.S. Thanks for reading to the end. If you found value in this, kindly recommend (by clicking the share buttons below) so other people can learn too!
Is there a Howto you'd love to learn? We'll be glad to create it for you, let us know in the comments. Cheers!

CONTACT US

We're always here. You can send us an email and we'll get back to you, asap.

Sending

© 2015 - 2018 Howtos.ng

or

Log in with your credentials

Forgot your details?