Custom Dropdown Menu using HTML CSS

Hey, developer today is Day 60 of our 90Projects in 90Days. So on Day-60 today we are going to Create a Custom DropDown Menu using HTML CSS and basic JavaScript.

To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.

Preview


HTML Code

index.html

<!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">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title> Custom Dropdown Menu </title>
</head>

<body>
    <div class="menu">
        <div class="select-btn">
            <span class="chooseText"> Choose and option</span>
            <div class="arrow"></div>
        </div>

        <ul class="options">
            <li class="option html">
                <i class="fa-brands fa-html5"></i>
                <span class="option-text"> HTML Simplified PDF </span>
            </li>
            <li class="option css">
                <i class="fa-brands fa-css3-alt"></i>
                <span class="option-text"> CSS Master PDF </span>
            </li>
            <li class="option js">
                <i class="fa-brands fa-js"></i>
                <span class="option-text"> JavaScript Doctory PDF </span>
            </li>
            <li class="option react">
                <i class="fa-brands fa-react"></i>
                <span class="option-text"> ReactJS CheatSheet </span>
            </li>
        </ul>
    </div>

    <script>
        const selectMenu = document.querySelector(".menu");
        const selectBtn = selectMenu.querySelector(".select-btn");

        selectBtn.addEventListener("click", function () {
            selectMenu.classList.toggle("active");
        });

    </script>

</body>

</html>


CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    background: #e65b00;
    display: flex;
    justify-content: center;
}

.arrow {
    height: 15px;
    width: 15px;
    transition: all 0.3s;
    transform: rotate(45deg);
    border-right: 4px solid black;
    border-bottom: 4px solid black;
}

.menu {
    width: 21rem;
    margin-top: 10rem;
}

.select-btn {
    display: flex;
    height: 3.5rem;
    background: #fff;
    padding: 1.5rem;
    font-size: 18px;
    margin-bottom: 5px;
    border-radius: 10px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
}

.menu.active .arrow {
    transition: all 0.3s;
    transform: rotate(-135deg);
}

.options {
    position: relative;
    transition: all 0.3s;
    padding: 20px;
    border-radius: 10px;
    display: none;
    background: #fff;
}

.menu.active .options {
    display: block;
}

.option {
    display: flex;
    height: 55px;
    cursor: pointer;
    padding: 0 15px;
    border-radius: 6px;
    align-items: center;
    background: #fff;
    transition: all 0.3s;
}

.option:hover {
    transform: translateX(5px);
}

.html:hover {
    background: #f0cec0;
}

.css:hover {
    background: #cad8f9;
}

.js:hover {
    background: #ede7b3;
}

.react:hover {
    background: #c1e7f2;
}

.option i {
    font-size: 25px;
    margin-right: 1rem;
}

.fa-html5 {
    color: #e96228;
}

.fa-css3-alt {
    color: #2862e9;
}

.fa-js {
    color: #edd718;
}

.fa-react {
    color: #5ed3f3;
}

.option-text {
    font-size: 1.2rem;
    color: #000;
}

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