Responsive Dropdown Menu by using HTML , CSS , JS

Responsive Dropdown Menu by using HTML , CSS , JS

- July 27, 2021

Responsive Dropdown Menu by using HTML , CSS , JS

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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="btn" id="button" onclick="sidebar()">
        ≡
    </div>
    <header id="head">

        <h2>NICT WEB</h2>
        <nav class="main-menu">
            <ul>
                <li><a href="">Link1</a></li>
                <li class="dropdown"><a href="">Link2</a>
                    <ul class="dropdown-list">
                        <li><a href="">Link2.1</a></li>
                        <li><a href="">Link2.2</a></li>
                        <li><a href="">Link2.3</a></li>
                        <li><a href="">Link2.4</a></li>
                        <li><a href="">Link2.5</a></li>
                    </ul>
                </li>
                <li><a href="">Link3</a></li>
                <li><a href="">Link4</a></li>
                <li><a href="">Link5</a></li>
            </ul>
        </nav>
    </header>
    <script src="script.js"></script>
</body>
</html>

CSS CODE
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
.btn{
    display: none;
}
header{
    background: rgb(210,210,233);
    display: flex;
    justify-content: space-around;
}

header h2{
    font-size: 35px;
    line-height: 80px;
    text-shadow: 3px 3px 5px rgb(49, 49,47);
    color: cyan;
    padding: 15px;
}
header .main-menu{
    position: relative;
}
header .main-menu > ul{
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

header .main-menu ul li{
    width: 150px;
    margin-left: 15px;
}

header .main-menu ul li a{
    display: block;
    background-color: chocolate;
    padding: 15px 25px;
    color: cornsilk;
}

header .main-menu ul li a:hover{
box-shadow: 3px 3px 4px darkblue;
background: floralwhite;
color: gray;
transition: all 0.2s ease-in-out;
}

header .dropdown{
    position: relative;
}

header .dropdown-list{
    position: absolute;
    top:50px;
    opacity: 0;
    visibility: hidden;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

header .dropdown:hover .dropdown-list{
    position: absolute;
    opacity: 1;
    visibility: visible;
    transform: rotateY(0deg);
    transition: all 0.5s ease-in-out;
}

header .dropdown .dropdown-list li{
    margin: 0;
}

@media screen and (max-width:800px){
    .btn{
        z-index: 1;
        display: inline-block;
        cursor: pointer;
        position: relative;
        padding: 25px;
        font-size: 25px;
        background: rgb(180,180,180);

    }
    .active{
        transform: translateX(0%);
        transition: all 0.5s ease-in-out;
    }
    .btnsilde{
        transform: translateX(300px);
        transition: all 0.5s ease-in-out;
    }
   header{
       z-index: -1;
       overflow: auto;
       flex-direction: column;
       align-items: flex-start;
       justify-content: flex-start;
       position: fixed;
       top: 0px;
       width: 350px;
       height: 100%;
       transform: translateX(-100%);
   }
   header .main-menu{
        width: 100%;
        height: auto;
   }

   header .main-menu > ul{
       position: relative;
       display: block;
       height: auto;
       width: 100%;
   }

   header .main-menu ul li{
       position: relative;
   }

   header .main-menu ul li a{
       display: block;
   }

   header .main-menu ul li a:hover{
       border-radius: 5px;
       margin: 0 auto;
   }

   header .dropdown{
       display: block;
   }
   header .dropdown .dropdown-list{
    position: absolute;
    top:0px;
    }

    header .dropdown:hover .dropdown-list{
        position: relative;
        }
}

JS Code
function sidebar(){
    var btn=document.getElementById("button");
    btn.classList.toggle("btnsilde");
   var header =document.getElementById("head");
   header.classList.toggle("active");
}

Comments