In this article, we are going to learn how to create a dropdown list using javascript, The dropdown list menu is very helpful for users when they visit any website. It makes a better experience for the user to use all kinds of services provided by the website without any hassle. In this article, we are going to create a dropdown list using HTML, CSS, and most important JavaScript.
The dropdown list is a toggleable menu that allows to user to choose one option from multiple. The dropdown list is basically a button, when the user clicks on that, it expands downward and shows its sub-elements, from which users can select any one of them according to their preferences.
Approach: In this article, we will create two dropdown lists, the first one will be a clickable dropdown list, which means that you have to click on that to see the rest of the sub-items, and the other one will be a hoverable dropdown list, you just have to hover your mouse over it and it will show the rest of the sub-element from which user can select one of them.
Example: In this dropdown list, the user will have to click on the button to open the dropdown list.
<!DOCTYPE html> < html lang = "en" >
< head >
< title >Dropdown list using javascript</ title >
< style >
body {
margin: 0;
padding: 0;
background: #333333;
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
}
.main {
height: 400px;
padding: 10px;
}
.dropdown_button {
background-color: #0979ad;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
width: 200px;
font-family: montserrat;
border: 1px solid #ffffff;
}
.courses {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.courses li {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
list-style: none;
background-color: rgb(47, 47, 47);
font-family: montserrat;
border: 1px solid white;
}
.courses li a {
text-decoration: none;
color: white;
display: block;
padding: 10px;
}
.courses li:hover {
background-color: #0979ad;
color: white;
}
</ style >
</ head >
< body >
< div class = "main" >
< div class = "dropdown_list" >
< button class = "dropdown_button"
onclick = "show_list()" >
Select course
</ button >
< div id = "courses_id" class = "courses" >
< li >< a href = "" >Machine learning</ a ></ li >
< li >< a href = "" >Data science</ a ></ li >
< li >< a href = "" >Data analysis</ a ></ li >
< li >< a href = "" >Data mining</ a ></ li >
< li >< a href = "" >Data warehousing</ a ></ li >
</ div >
</ div >
</ div >
< script >
function show_list() {
var courses = document.getElementById("courses_id");
if (courses.style.display == "block") {
courses.style.display = "none";
} else {
courses.style.display = "block";
}
}
window.onclick = function (event) {
if (!event.target.matches('.dropdown_button')) {
document.getElementById('courses_id')
.style.display = "none";
}
}
</ script >
</ body >
</ html >
|
Output: