Skip to content

Commit 87e17ea

Browse files
author
aay7ush
committed
feat: add mobile-nav with functionality
1 parent b8f26ba commit 87e17ea

File tree

3 files changed

+93
-2
lines changed

3 files changed

+93
-2
lines changed

‎index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
<script src="script.js" defer></script>
99
</head>
1010
<body>
11+
<div class="backdrop"></div>
12+
1113
<header class="header">
1214
<a href="/" class="header__logo">
1315
<img src="./assets/logo.svg" alt="logo" />
@@ -34,5 +36,23 @@
3436
<button id="menu-btn" class="header__button">Menu</button>
3537
</div>
3638
</header>
39+
40+
<aside class="mobile-nav">
41+
<button id="close-btn">&times;</button>
42+
43+
<nav>
44+
<ul class="mobile-nav__items">
45+
<li class="mobile-nav__link"><a href="/">Model S</a></li>
46+
<li class="mobile-nav__link"><a href="/">Model 3</a></li>
47+
<li class="mobile-nav__link"><a href="/">Model X</a></li>
48+
<li class="mobile-nav__link"><a href="/">Solar Roof</a></li>
49+
<li class="mobile-nav__link"><a href="/">Solar Panels</a></li>
50+
<li class="mobile-nav__link"><a href="/">Find Us</a></li>
51+
<li class="mobile-nav__link"><a href="/">Support</a></li>
52+
<li class="mobile-nav__link"><a href="/">Shop</a></li>
53+
<li class="mobile-nav__link"><a href="/">Account</a></li>
54+
</ul>
55+
</nav>
56+
</aside>
3757
</body>
3858
</html>

‎script.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// Mobile Nav Functionality
2+
3+
const menuBtn = document.getElementById("menu-btn")
4+
const closeBtn = document.getElementById("close-btn")
5+
6+
const openMenu = () => {
7+
document.querySelector(".backdrop").classList.add("active")
8+
document.querySelector(".mobile-nav").classList.add("active")
9+
}
10+
11+
const closeMenu = () => {
12+
document.querySelector(".backdrop").classList.remove("active")
13+
document.querySelector(".mobile-nav").classList.remove("active")
14+
}
15+
16+
menuBtn.addEventListener("click", openMenu)
17+
closeBtn.addEventListener("click", closeMenu)

‎style.css

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,12 +91,66 @@ a {
9191
}
9292

9393
.header__nav-link,
94-
.header__button {
94+
.header__button,
95+
.mobile-nav__link {
9596
transition: all 0.4s ease;
9697
}
9798

9899
.header__nav-link:hover,
99-
.header__button:hover {
100+
.header__button:hover,
101+
.mobile-nav__link:hover {
100102
text-decoration: underline;
101103
text-underline-offset: 0.3rem;
102104
}
105+
106+
/* Mobile Nav Styles */
107+
108+
.mobile-nav {
109+
height: 100vh;
110+
width: 320px;
111+
112+
position: fixed;
113+
right: -320px;
114+
transition: right 0.3s ease;
115+
z-index: 3;
116+
117+
background-color: #fff;
118+
padding: 3rem 2.5rem;
119+
font-weight: 500;
120+
}
121+
122+
.mobile-nav.active {
123+
right: 0;
124+
}
125+
126+
.mobile-nav #close-btn {
127+
font-family: sans-serif;
128+
font-size: 2rem;
129+
130+
position: absolute;
131+
top: 10px;
132+
right: 10px;
133+
}
134+
135+
.mobile-nav__items {
136+
display: flex;
137+
flex-direction: column;
138+
gap: 1.5rem;
139+
}
140+
141+
/* Backdrop Styles */
142+
143+
.backdrop {
144+
display: none;
145+
146+
position: absolute;
147+
inset: 0;
148+
z-index: 1;
149+
150+
background-color: rgba(0, 0, 0, 0.35);
151+
backdrop-filter: blur(5px);
152+
}
153+
154+
.backdrop.active {
155+
display: block;
156+
}

0 commit comments

Comments
 (0)