Hi guys I am back with another fantastic project in this project I created a DorpDown Menu-like e-commerce website Using HTML, CSS & JavaScript.
I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them for free.
DropDown Menu
A dropdown menu is a list of options hidden until the user interacts with it, such as by clicking or hovering over it. The menu options then appear below the trigger element, which is typically a button or a link.
Dropdown menus are a common way to present many options in a compact space. They are often used on websites and web applications to allow users to select from a list of items, such as countries, languages, or file formats.
In this menu, I created a multi-dropdown when the user hovers over skills then It will appear a large menu and again user clicks on every menu element like Coding, Design, and Dev Ops which shows the new options.
About This Project
This project was created by the codingpakistan team to help students learn coding and programming in a simple way. If you want to join our team please follow us on Instagram.
| Created by | Coding Pakistan |
| Languages | HTML / CSS / JS |
| Source Code | Available Below |
| Preview | Take Preview |
How to Create a Drop-Down Menu
There are some steps to create this type of Drop-Down using HTML, CSS, and JavaScript that are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create three files in HTML, CSS, and JavaScript.
- Make sure the HTML file extension is (.html), the CSS file extension is (.css) and the JavaScript file extension is (.js)
- 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.
Multi Drop-Down Menu – Source Code
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Created by www.codingpakistan.com -->
<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="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
/>
<link rel="stylesheet" href="style.css" />
<title>Dropdown 6</title>
</head>
<body>
<nav>
<a class="dropdown-button" href="#" onmouseenter="toggleMenuOpen(true)" onmouseleave="toggleMenuOpen(false)">
Skills
<svg
width="18px"
height="18px"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 9L11.7874 14.7874V14.7874C11.9048 14.9048 12.0952 14.9048 12.2126 14.7874V14.7874L18 9"
stroke="#323232"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</a>
<a href="#"> About </a>
<a href="#"> Portfolio </a>
</nav>
<div onmouseenter="toggleMenuOpen(true)" onmouseleave="toggleMenuOpen(false)" class="menu">
<div class="menu-buttons">
<button class="active" onclick="toggleMenuBlock(this, 0)">
Coding
</button>
<button onclick="toggleMenuBlock(this, 1)">Design</button>
<button onclick="toggleMenuBlock(this, 2)">Dev Ops</button>
</div>
<div id="menuContent" class="menu-content">
<div class="menu-block">
<p>React</p>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>TypeScript</p>
<p>ECMAScript</p>
<p>Vue</p>
<p>Svelte</p>
<p>Angular</p>
</div>
<div class="menu-block">
<p>Figma</p>
<p>Photoshop</p>
<p>Adobe XD</p>
<p>Sketch</p>
<p>InVision</p>
<p>EdrawMax</p>
<p>After Effects</p>
<p>Jitter</p>
<p>Spline</p>
</div>
<div class="menu-block">
<p>Netlify</p>
<p>Vercel</p>
<p>Heroku</p>
<p>GitHub</p>
<p>Bit Bucket</p>
<p>npm</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS FILE
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background: #f1f0fa;
overflow-x: hidden;
font-family: "Euclid Circular A", "Poppins";
}
:root {
--color-primary: #6d63ff;
--sidebar-width: 140px;
--menu-height: 140px;
}
nav {
position: relative;
display: flex;
align-items: center;
padding: 0 20px;
background: #ffffff;
width: 100%;
height: 60px;
box-shadow: 0 20px 30px rgba(57, 76, 96, 0.06);
}
nav a {
text-decoration: none;
color: inherit;
font-weight: 500;
padding: 0 10px;
}
nav > img {
width: 34px;
height: 34px;
border-radius: 50%;
}
.burger {
width: 16px;
height: 16px;
}
nav > a {
display: flex;
align-items: center;
gap: 3px;
height: 60px;
padding: 0 16px 0 0;
}
.dropdown > a > img {
width: 16px;
height: 16px;
margin-right: 12px;
}
.menu {
overflow: hidden;
position: fixed;
z-index: 1;
top: 59px;
left: 0;
width: 100vh;
height: var(--menu-height);
padding: 0 20px 20px 0;
background: #ffffff;
opacity: 0;
visibility: hidden;
translate: 0 -10px;
box-shadow: 0 20px 30px rgba(57, 76, 96, 0.06);
transition: 0.3s;
}
body.open .menu {
opacity: 1;
visibility: visible;
translate: 0;
}
body.open .dropdown-button,
nav a:hover {
color: var(--color-primary);
}
body.open .dropdown-button path {
stroke: var(--color-primary);
}
.menu-buttons {
width: var(--sidebar-width);
}
.menu-buttons button {
margin: 0;
font-size: 14px;
width: 100%;
height: 36px;
margin: 4px 0 4px 10px;
padding: 0 0 0 7px;
background: transparent;
border-radius: 20px;
border: 0;
border-left: 6px solid transparent;
opacity: 0.5;
display: flex;
align-items: center;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: 0.3s;
}
.menu-buttons button.active {
opacity: 1;
color: var(--color-primary);
}
.menu-buttons button.active,
.menu-buttons button:hover {
background: #f0efff;
}
.menu-content {
position: absolute;
top: 0;
left: var(--sidebar-width);
height: calc(var(----menu-height) * 3);
padding-left: 30px;
transition: 0.6s;
}
.menu-content p {
display: flex;
align-items: center;
height: 40px;
font-size: 13px;
margin: 0;
color: #222222;
opacity: 0.5;
}
.menu-block {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 41px;
align-items: center;
gap: 0 30px;
height: var(--menu-height);
}
JavaScript FILE
const menuContent = document.querySelector("#menuContent");
const menuButtons = document.querySelectorAll(".menu-buttons button");
const menuHeight = getComputedStyle(document.documentElement).getPropertyValue(
"--menu-height"
);
const toggleMenuOpen = (value) => {
document.body.classList.toggle("open", value);
};
const toggleMenuBlock = (event, index) => {
menuButtons.forEach((button) => button.classList.remove("active"));
event.classList.toggle("active");
menuContent.style.translate = `0 calc(0px - ${menuHeight} * ${index})`;
};