Skip to content

Commit 7e32715

Browse files
dconcodconco
committed
Implement mobile menu toggle functionality and overlay
1 parent 2cde7fa commit 7e32715

File tree

3 files changed

+149
-4
lines changed

3 files changed

+149
-4
lines changed

‎css/style.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,62 @@ nav .container {
8585
width: 100%;
8686
}
8787

88+
/* Mobile Menu Toggle */
89+
.mobile-menu-toggle {
90+
display: none;
91+
flex-direction: column;
92+
gap: 6px;
93+
background: none;
94+
border: none;
95+
cursor: pointer;
96+
padding: 8px;
97+
z-index: 1001;
98+
transition: all 0.3s ease;
99+
}
100+
101+
.mobile-menu-toggle span {
102+
width: 28px;
103+
height: 3px;
104+
background: #64ffda;
105+
border-radius: 3px;
106+
transition: all 0.3s ease;
107+
transform-origin: center;
108+
box-shadow: 0 0 8px rgba(100, 255, 218, 0.3);
109+
}
110+
111+
.mobile-menu-toggle.active span:nth-child(1) {
112+
transform: translateY(9px) rotate(45deg);
113+
}
114+
115+
.mobile-menu-toggle.active span:nth-child(2) {
116+
opacity: 0;
117+
transform: scaleX(0);
118+
}
119+
120+
.mobile-menu-toggle.active span:nth-child(3) {
121+
transform: translateY(-9px) rotate(-45deg);
122+
}
123+
124+
/* Mobile Menu Overlay */
125+
.mobile-menu-overlay {
126+
display: none;
127+
position: fixed;
128+
top: 0;
129+
left: 0;
130+
width: 100%;
131+
height: 100vh;
132+
background: rgba(10, 10, 25, 0.9);
133+
backdrop-filter: blur(5px);
134+
z-index: 999;
135+
opacity: 0;
136+
transition: opacity 0.3s ease;
137+
}
138+
139+
.mobile-menu-overlay.active {
140+
display: block;
141+
opacity: 1;
142+
}
143+
88144
/* Hero Section */
89145
.hero {
90146
min-height: 100vh;
@@ -836,10 +892,55 @@ footer p {
836892

837893
/* Mobile Styles */
838894
@media (max-width: 768px) {
895+
.mobile-menu-toggle {
896+
display: flex;
897+
}
898+
839899
.nav-links {
900+
position: fixed;
901+
top: 0;
902+
right: -100%;
903+
height: 100vh;
904+
width: 280px;
905+
background: rgba(15, 15, 35, 0.98);
906+
backdrop-filter: blur(20px);
907+
flex-direction: column;
908+
padding: 100px 40px 40px;
909+
gap: 25px;
910+
box-shadow: -5px 0 30px rgba(100, 255, 218, 0.1);
911+
transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
912+
z-index: 1000;
913+
border-left: 2px solid #64ffda;
914+
}
915+
916+
.nav-links.active {
917+
right: 0;
918+
}
919+
920+
.nav-links li {
921+
width: 100%;
922+
}
923+
924+
.nav-links a {
925+
font-size: 1.2em;
926+
padding: 12px 0;
927+
border-bottom: 1px solid rgba(100, 255, 218, 0.1);
928+
transition: all 0.3s ease;
929+
display: block;
930+
color: #ccd6f6;
931+
}
932+
933+
.nav-links a::after {
840934
display: none;
841935
}
842936

937+
.nav-links a:hover {
938+
padding-left: 15px;
939+
color: #64ffda;
940+
border-bottom-color: #64ffda;
941+
text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
942+
}
943+
843944
.hero-content {
844945
grid-template-columns: 1fr;
845946
text-align: center;

‎index.html‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -164,9 +164,15 @@
164164
</script>
165165
</head>
166166
<body>
167+
<div class="mobile-menu-overlay"></div>
167168
<nav>
168169
<div class="container">
169170
<a href="#" class="logo">dconco</a>
171+
<button class="mobile-menu-toggle" aria-label="Toggle menu">
172+
<span></span>
173+
<span></span>
174+
<span></span>
175+
</button>
170176
<ul class="nav-links">
171177
<li><a href="#home">Home</a></li>
172178
<li><a href="#about">About</a></li>
@@ -184,7 +190,7 @@
184190
<div class="hero-image floating">
185191
<div class="profile-pic">
186192
<img
187-
src="https://raw.githubusercontent.com/dconco/dconco/refs/heads/main/favicons/android-chrome-512x512.png"
193+
src="https://raw.githubusercontent.com/dconco/dconco/refs/heads/main/profile3.png"
188194
alt="Dave Conco"
189195
/>
190196
</div>
@@ -291,7 +297,7 @@ <h2>Want to test my AI bot that talks like me? 🚀</h2>
291297
<span>Trained on my portfolio & experience</span>
292298
</div>
293299
<div class="feature-item">
294-
<i class="fas fa-lightning-bolt"></i>
300+
<i class="fas fa-lightning-bolt">⚡</i>
295301
<span>Instant responses 24/7</span>
296302
</div>
297303
<div class="feature-item">
@@ -502,12 +508,12 @@ <h2 class="section-title">Let's Work Together</h2>
502508
<div>@dave_conco</div>
503509
</a>
504510
<a
505-
href="https://facebook.com/daveconco"
511+
href="https://facebook.com/dconcovibes"
506512
class="contact-item"
507513
target="_blank"
508514
>
509515
<div class="icon"><i class="fab fa-facebook"></i></div>
510-
<div>facebook.com/daveconco</div>
516+
<div>facebook.com/dconcovibes</div>
511517
</a>
512518
<a
513519
href="https://youtube.com/@daveconco"

‎js/index.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,48 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
88
behavior: 'smooth',
99
block: 'start'
1010
})
11+
// Close mobile menu after clicking a link
12+
const navLinks = document.querySelector('.nav-links')
13+
const menuToggle = document.querySelector('.mobile-menu-toggle')
14+
const menuOverlay = document.querySelector('.mobile-menu-overlay')
15+
if (navLinks && menuToggle && menuOverlay) {
16+
navLinks.classList.remove('active')
17+
menuToggle.classList.remove('active')
18+
menuOverlay.classList.remove('active')
19+
document.body.style.overflow = 'auto'
20+
}
1121
}
1222
})
1323
})
1424

25+
// Mobile menu toggle
26+
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle')
27+
const navLinks = document.querySelector('.nav-links')
28+
const menuOverlay = document.querySelector('.mobile-menu-overlay')
29+
30+
if (mobileMenuToggle && navLinks && menuOverlay) {
31+
mobileMenuToggle.addEventListener('click', () => {
32+
mobileMenuToggle.classList.toggle('active')
33+
navLinks.classList.toggle('active')
34+
menuOverlay.classList.toggle('active')
35+
36+
// Prevent body scroll when menu is open
37+
if (navLinks.classList.contains('active')) {
38+
document.body.style.overflow = 'hidden'
39+
} else {
40+
document.body.style.overflow = 'auto'
41+
}
42+
})
43+
44+
// Close menu when clicking overlay
45+
menuOverlay.addEventListener('click', () => {
46+
navLinks.classList.remove('active')
47+
mobileMenuToggle.classList.remove('active')
48+
menuOverlay.classList.remove('active')
49+
document.body.style.overflow = 'auto'
50+
})
51+
}
52+
1553
// Add scroll effect to navigation
1654
window.addEventListener('scroll', () => {
1755
const nav = document.querySelector('nav')

0 commit comments

Comments
 (0)