Dropdown Navigation menu using HTML CSS and JavaScript Source Code

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

navbar with dropdown html css, raju webdev, geeks help, Dropdown menu using HTML CSS and JavaScript Source Code, onclick dropdown menu example, dropdown menu javascript, dropdown menu html css javascript,, drop down menu source code

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')
})


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad