How to create a clickable dropdown menu with CSS and JavaScript.
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
Certainly! Here's a basic example of the HTML, CSS, and JavaScript for a simple dropdown:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Dropdown Example</title>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS (styles.css):
/* Style the dropdown button */
.dropbtn {
background-color: #3498db;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
}
/* Style the dropdown links */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color on hover */
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* Show the dropdown content when the dropdown button is clicked */
.show {
display: block;
}JavaScript (script.js):
// Get the dropdown button and content
var dropdownBtn = document.querySelector('.dropbtn');
var dropdownContent = document.querySelector('.dropdown-content');
// Toggle the 'show' class to display/hide the dropdown content
dropdownBtn.addEventListener('click', function() {
dropdownContent.classList.toggle('show');
});
// Close the dropdown if the user clicks outside of it
window.addEventListener('click', function(event) {
if (!event.target.matches('.dropbtn')) {
if (dropdownContent.classList.contains('show')) {
dropdownContent.classList.remove('show');
}
}
});This script creates a simple dropdown with some basic styling. You can further customize the styles and behavior according to your requirements.
Rate this article
Getting Info...