How to Create Clickable Dropdown

Creation of clickable dropdown menu :

Learn the creation for a clickable dropdown menu with CSS and JavaScript.

Dropdown

A dropdown menu is toggleable that permits user to select a value from a predefined list.

Create a Clickable Dropdown

At the time user clicks on a button the created drop-down menu will display on it.

Step 1) Add HTML:

Example:

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

Example Explained

To open the dropdown menu you can use any element. For example a <button>,<a> or <p> element.

To create the dropdown menu use the container element that is <div>and then add the dropdown links inside it.

Wrap an <div>element round the button and the <div> to position the dropdown menu correctly with CSS.

Step 2) Add CSS:

Example:

/* Dropdown Button */
.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;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

Example Explained

We styled the dropdown button with a background color, hover effect, padding etc.

Clickable Dropdown

The .dropdown class use the position is relative, that is necessary at the time we need the content of dropdown to be arranged below at the right side of the dropdown button (using position is absolute).

The content of .dropdown class stores the actual dropdown menu. By default, it’s hidden and can be displayed on hover as shown below. The min width is set to 160px. To modify this feel free.

Tip: If you need the dropdown content width to be as wide as the dropdown button, set the width to 100% and overflow is auto to enable scroll on small screens.

Despite using the border, we can use the box- shadow feature to make the dropdown menu seems like a “card”.

Step 3) Add JavaScript:

Example

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
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’);
}
}
}
}

Right-aligned dropdown

Example:

Aligned Dropdown Content

Use float: right on the dropdown class to float the dropdown menu to the right, and right:0 on the dropdown content if you want the dropdown content to go from right to left.