Hi, guys I am back with another fantastic project in this project I created a Modern Drop Down Menu Using HTML, CSS & JavaScript.
I also give my readers and followers the full source code for this project at no cost; there is no need to subscribe. These code files are free to download and use.
Drop-Down Menu
A drop-down menu is a graphical user interface (GUI) element that presents a list of options when activated by the user. Typically, these options are hidden or collapsed until the user clicks or hovers over a specific trigger element, such as a button or a link.
When activated, the menu “drops down” to reveal a list of choices, and the user can then select one of the options.
Drop-down menus are commonly used in Websites and Applications to organize and present a large number of choices in a compact and organized manner.
They are efficient for saving space on the interface and providing a clean and intuitive user experience. Drop-down menus can be found in navigation bars, forms, settings panels, and various other parts of a user interface.
In this Dron-Down menu, I add only three options you can add as you want.
About This Project
This project was created by the Code Hunter team to help students simply learn coding and programming. If you want to join our team please follow us on Instagram.
| Created by | Code Hunter |
| Languages | HTML, CSS & JS |
| Source Code | Available Below |
| Preview | Take Preview |
| GitHub Link | Code Link |
How to Create a Drop-Down Menu
There are some steps to create this type of Drop-Down Menu Using HTML, CSS, and JavaScript which are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create three (3) files for HTML, CSS, and JavaScript.
- Make sure the HTML file extension is (.html), and the CSS file extension is (.css).
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- The last step is copying and pasting the given code into your files.
Video Tutorial
If you want to learn more about this project please watch this video and also subscribe to this YouTube channel for more content like this. This video is provided by Sona Coder.
Drop-Down Menu Using HTML, CSS, and JavaScript – Source Code
HTML FILE
<!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>Drop down menu</title>
<!-- box icon cdn -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!-- custom css file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!-- menu toggle -->
<div class="menu-toggle">
<div class="menu-item profile-tab">
<span class="item-icon">
<i class='bx bxs-user-circle'></i>
</span>
<span class="item-txt">
Profile
</span>
<span class="item-icon menu-toggle-icon">
<i class='bx bx-chevron-down'></i>
</span>
</div>
</div>
<!-- drop down menu -->
<div class="drop-down-menu">
<div class="menu-item">
<span class="item-icon">
<i class='bx bxs-dashboard'></i>
</span>
<span class="item-txt">
Dashboard
</span>
</div>
<div class="menu-item">
<span class="item-icon">
<i class='bx bx-log-out'></i>
</span>
<span class="item-txt">
logout
</span>
</div>
<div class="menu-item">
<span class="item-icon">
<i class='bx bx-cog' ></i>
</span>
<span class="item-txt">
setting
</span>
</div>
</div>
</div>
<!-- custom js file -->
<script src="script.js"></script>
</body>
</html>
CSS FILE
/*
global font
*/
/*
global variables
*/
:root{
--clr-bg:linear-gradient( 90deg, rgba(0,213,255,1) 2.5%, rgba(79,255,255,1) 97.7% );
--clr-bg-menu-item: #fff;
--clr-menu-item-hover:rgb(19, 98, 255);
}
/*
base
*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'poppins';
background: var(--clr-bg);
}
/* container */
.container{
display: flex;
flex-direction: column;
row-gap: 2rem;
align-items: center;
justify-content: center;
}
/* menu item */
.menu-item{
height: 50px;
width: 350px;
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 5rem;
background-color: var(--clr-bg-menu-item);
border: none;
font-size: 1.1rem;
}
.menu-item:hover{
cursor: pointer;
}
.menu-item:hover{
color: var(--clr-menu-item-hover);
}
.profile-tab{
border-radius: 1rem;
}
/* drop down menu */
.drop-down-menu{
height: 0;
overflow: hidden;
transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.drop-down-menu.active{
height: calc(55px * 3);
}
.drop-down-menu .menu-item{
padding-top: 1rem;
padding-bottom: 1rem;
}
.drop-down-menu .menu-item:first-child{
border-radius: 1rem 1rem 0 0 ;
}
.drop-down-menu .menu-item:last-child{
border-radius: 0 0 1rem 1rem ;
}
.drop-down-menu .menu-item .item-txt{
width: 50%;
text-align: left;
}
.item-icon{
font-size: 1.5rem;
}
.menu-toggle-icon.active{
animation: menu-icon 1s ease forwards;
}
@keyframes menu-icon {
from{
transform: rotate(0);
}
to{
transform: rotate(540deg);
}
}
JavaScript FILE
const menuToggleIcon = document.querySelector(".menu-toggle-icon");
const dropDownMenu = document.querySelector('.drop-down-menu');
menuToggleIcon.addEventListener('click', () => {
menuToggleIcon.classList.toggle('active');
dropDownMenu.classList.toggle('active');
});
Final Words
Mastering the creation of a modern drop-down menu using HTML, CSS, and JavaScript unlocks a realm of enhanced user interfaces.
This blog has guided readers through the intricacies of crafting dynamic and visually appealing menus. By integrating these technologies, developers can elevate the user experience with interactive and responsive navigation.
The inclusion of JavaScript adds a layer of interactivity, enabling menus to adapt seamlessly to user actions. As we wrap up, remember that the skills gained here extend beyond drop-down menus, forming a foundation for more sophisticated web development.
Embrace the fusion of design and functionality, and dive into the endless possibilities of creating contemporary, user-friendly interfaces. Happy coding!