How to create dropdown list using JavaScript ?
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.
HTML
<!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:
Please Login to comment...