Hey, developers welcome to Day 25 of our 90Days 90Projects challenge. And in Day 25 we are going to create a Dropdown menu using HTML CSS and JavaScript Source Code
So to run this code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> DropDown Menu</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<div class="nav-left">
<h2>Geeks Help</h2>
</div>
<div class="nav-right">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#pages">Pages</a></li>
<label for="service"></label>
<li class="services" id="dropdown">
<a href="#services">Services <i class="fa-solid fa-caret-down"></i></a>
<ul class="toggle">
<li><a href="#"> Content Writing </a></li>
<li><a href="#"> Web Development </a></li>
<li><a href="#"> YouTube Management </a></li>
<li><a href="#"> Social Media Management </a></li>
</ul>
</li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
background-color: rgb(11, 18, 54);
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.nav-left h2 {
font-size: 2rem;
color: white;
font-family: 'Ubuntu', sans-serif;
}
.nav-right ul {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.nav-right ul li {
list-style: none;
}
.nav-right ul li a {
color: white;
text-transform: capitalize;
text-decoration: none;
font-size: 1.1rem;
margin: 1rem;
font-family: 'Poppins', sans-serif;
}
.services {
position: relative;
transition: all .5s;
}
.nav-right .toggle {
display: none;
transition: all .5s linear;
}
.toggle.active {
display: flex;
position: absolute;
width: 20rem;
top: 100%;
left: 0;
margin-top: 1rem;
background-color: rgb(11, 18, 54);
flex-direction: column;
align-items: flex-start;
transition: all .5s linear;
}
.toggle li {
margin: 1rem 0;
}
.toggle li a {
font-size: 1.1rem;
}
JavaScript
const dropBtn = document.getElementById('dropdown')
dropBtn.addEventListener('click', function () {
console.log('clicked');
const open = document.querySelector('.toggle')
open.classList.toggle('active')
})
