In this post, we will learn how to create a clickable dropdown menu using css and JavaScript. In the previous post, the work we did with the help of hover will do the same in this post with the help of JavaScript and create a clickable dropdown menu. Must read this post first: Create A Hoverable Dropdown Menu with CSS ?

How To Create A Clickable Dropdown Menu With CSS and JavaScript ?

Create A Clickable Dropdown Menu

Example of A Clickable Dropdown Menu



To create a clickable dropdown menu, we follow the following steps:

Step (1) :  In this step we write HTML code as follows:
At the click of a button the dropdwon menu is visible and then hidden. For this, a function dropdownMenu() will be taken on the button. We will write the code of this function later.
<div class="dropdown">
<button class="dropbtn" onclick="dropdownMenu()">Dropdown Button</button>
<div class="dropdown-content" id="dropdownId">
<a href="#"> Sub Menu 1</a>
<a href="#"> Sub Menu 2</a>
<a href="#"> Sub Menu 3</a>
</div>
</div> code-box

Step (2) : Now we write CSS code for dropdown button as follows:
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #000;
color: #fff;
padding: 15px;
cursor: pointer;
font-size: 15px;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #000;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
text-decoration: none;
}
.dropdown:hover .dropbtn {
background-color: #444;
}
.showDropdown {
display: block;
} code-box

Step (3) : In this step we write JavaScript code and make the button clickable:
  • First of all we create a function named dropdownMenu().
  • Then get dropdownId in this function from getElementById() method and then toggle the showDropdown class with the help of classList() property on it.
  • Now you will see our dropdown menu button is working correctly.
  • If you have noticed, you will know when dropdown is open and when we click on the dropdown button again to close it, only then dropdown is closed.
  • If you want to hide the dropdown menu by clicking on any other place than the dropdown button, then we have to write separate code for this.
  • For this, we create an event named window.onclick and create a function in it. In this function, with the help of the if statement, we place a condition that what should happen when the click is somewhere other than dropbtn.
  • Then get the dropdown-content class using the getElementsByClassName() method and save it in the dropdowns variable.
  • Then with the help of for loop, check whether the dropdown menu is open or closed. If the dropdown menu is open, it has a showDropdown class, then remove that class through the ClassList() property.
  • Now you will see that when we click anywhere other than the dropdown button to close the dropdown menu, the dropdown menu is also closed.
function dropdownMenu() {
document.getElementById("dropdownId").classList.toggle("showDropdown");
}

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("showDropdown")) {
openDropdown.classList.remove("showDropdown");
}
}
}
} code-box

Summary

In this post we learn how to create a clickable dropdown menu with CSS ands JavaScript. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post