Skip to content

Commit 6779cba

Browse files
Ravi Tejatime-to-program
Ravi Teja
authored and
time-to-program
committed
Multi Level Dropdown Menu Using HTML CSS & JS
0 parents  commit 6779cba

File tree

3 files changed

+193
-0
lines changed

3 files changed

+193
-0
lines changed

‎index.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
14+
<link
15+
rel="stylesheet"
16+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
17+
/>
18+
19+
<link rel="stylesheet" href="styles.css" />
20+
<title>Dropdown Button</title>
21+
</head>
22+
23+
<body>
24+
<div class="dropdown">
25+
<button class="dropdown-btn" onclick="toggleDropdown()">
26+
Dashboard
27+
<span class="material-symbols-outlined expand-icon"> expand_more </span>
28+
</button>
29+
30+
<div class="dropdown-content" id="myDropdown">
31+
<a href="#">
32+
<span class="material-symbols-outlined"> cottage </span>
33+
Home
34+
</a>
35+
<a href="#">
36+
<span class="material-symbols-outlined">category</span>
37+
Products
38+
</a>
39+
<a href="#">
40+
<span class="material-symbols-outlined">donut_large</span>
41+
Services
42+
</a>
43+
44+
<div class="nested-dropdown">
45+
<a href="#">
46+
<span class="material-symbols-outlined">contact_support</span>
47+
Contact Us
48+
</a>
49+
50+
<div class="nested-dropdown-content">
51+
<a href="#">
52+
<span class="material-symbols-outlined">contact_mail</span>
53+
Contact Information
54+
</a>
55+
<a href="#">
56+
<span class="material-symbols-outlined">unknown_document</span>
57+
Inquiry Form
58+
</a>
59+
<a href="#">
60+
<span class="material-symbols-outlined">explore</span>
61+
Visit Us
62+
</a>
63+
</div>
64+
</div>
65+
66+
<a href="#">
67+
<span class="material-symbols-outlined">info</span>
68+
About Us
69+
</a>
70+
</div>
71+
</div>
72+
73+
<script src="./script.js"></script>
74+
</body>
75+
</html>

‎script.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
let isMenuOpen = false;
2+
3+
function toggleDropdown() {
4+
let dropdown = document.getElementById("myDropdown");
5+
dropdown.classList.toggle("show-dropdown");
6+
7+
let dropdownIcon = document.getElementsByClassName("expand-icon")[0];
8+
dropdownIcon.textContent = isMenuOpen ? "expand_more" : "keyboard_arrow_up";
9+
isMenuOpen = !isMenuOpen;
10+
}
11+
12+
// Close the dropdown if the user clicks outside of it
13+
window.onclick = function (event) {
14+
if (!event.target.matches(".dropdown-btn")) {
15+
let dropdowns = document.getElementsByClassName("dropdown-content");
16+
let dropdownIcon = document.getElementsByClassName("expand-icon")[0];
17+
18+
for (let i = 0; i < dropdowns.length; i++) {
19+
let openDropdown = dropdowns[i];
20+
if (openDropdown.classList.contains("show-dropdown")) {
21+
openDropdown.classList.remove("show-dropdown");
22+
dropdownIcon.textContent = "expand_more";
23+
isMenuOpen = false;
24+
}
25+
}
26+
}
27+
};

‎styles.css

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
* {
2+
margin: 0px;
3+
padding: 0px;
4+
font-family: "Poppins", sans-serif;
5+
}
6+
7+
body {
8+
height: 70vh;
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
background: linear-gradient(107deg, #E5F0FD 0.23%, #D1E6FF 100%);
13+
}
14+
15+
.dropdown {
16+
position: relative;
17+
display: inline-block;
18+
}
19+
20+
.dropdown-btn {
21+
display: flex;
22+
align-items: center;
23+
gap: 10px;
24+
font-size: 17px;
25+
color: #4d4d4d;
26+
border: none;
27+
padding: 14px 40px;
28+
border-radius: 10px;
29+
background-color: #ffffff;
30+
cursor: pointer;
31+
}
32+
33+
.dropdown-content {
34+
display: none;
35+
position: absolute;
36+
background-color: #ffffff;
37+
min-width: 210px;
38+
z-index: 1;
39+
margin-top: 20px;
40+
border-radius: 10px;
41+
}
42+
43+
.show-dropdown {
44+
display: block;
45+
}
46+
47+
/* Styles for nested dropdowns */
48+
.nested-dropdown {
49+
position: relative;
50+
}
51+
52+
.nested-dropdown-content {
53+
display: none;
54+
position: absolute;
55+
left: 100%;
56+
top: 0;
57+
background-color: #ffffff;
58+
min-width: 250px;
59+
z-index: 1;
60+
border-radius: 0 10px 10px 10px;
61+
}
62+
63+
.nested-dropdown:hover .nested-dropdown-content {
64+
display: block;
65+
}
66+
67+
.dropdown-content a,
68+
.nested-dropdown-content a {
69+
color: #70747c;
70+
padding: 15px 16px;
71+
text-decoration: none;
72+
display: flex;
73+
align-items: center;
74+
gap: 15px;
75+
border-radius: 10px;
76+
}
77+
78+
.material-symbols-outlined {
79+
color: #70747c;
80+
}
81+
82+
.dropdown-content a:hover,
83+
.nested-dropdown-content a:hover {
84+
color: #4097fe;
85+
background-color: #f5f8fb;
86+
}
87+
88+
.dropdown-content a:hover span,
89+
.nested-dropdown-content a:hover span {
90+
color: #4097fe;
91+
}

0 commit comments

Comments
 (0)