femmefaytale/cotech-website
0
0
Fork 0
forked from autonomic-cooperative/cotech-website
Code Issues Pull Requests Projects Releases Wiki Activity

Implement burger menu

Browse Source 
Rather than attempt to recreate the exact burger menu from the old
version of the site, since it requires a number of dependencies, I've
added a burger menu with some inline javascript to handle the toggle
states.

I used Claude 4 to help generate the CSS here.
This commit is contained in:
Chris Lowis
2025-06-25 21:52:48 +01:00
parent b9d79dd8f8
commit 877836953a
2 changed files with 84 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
_includes/header.html
View File

@ -5,6 +5,14 @@
</a>
</div>
<div>
<button class="header_burger-btn" aria-label="Toggle menu">
<svg class="header_burger-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<svg class="header_close-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
<ul class="header_menu-list">
<li><a href="/#members">Members</a></li>
<li><a href="/about">About</a></li>
@ -12,4 +20,23 @@
<li><a href="/#contact">Contact</a></li>
</ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const burgerBtn = document.querySelector('.header_burger-btn');
const menuList = document.querySelector('.header_menu-list');
burgerBtn.addEventListener('click', function() {
menuList.classList.toggle('active');
burgerBtn.classList.toggle('active');
});
const menuLinks = document.querySelectorAll('.header_menu-list a');
menuLinks.forEach(link => {
link.addEventListener('click', function() {
menuList.classList.remove('active');
});
});
});
</script>
</header>

57
assets/css/app.css
View File

@ -126,6 +126,63 @@ section.content h2 {
letter-spacing: 0.05em;
}
.header_burger-btn {
display: none;
background: none;
border: none;
cursor: pointer;
padding: var(--space-xs);
color: var(--cotech-dark-grey);
}
.header_close-icon {
display: none;
}
@media screen and (width < 480px) {
.header {
position: relative;
}
.header_burger-btn {
display: block;
}
.header_menu-list {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--cotech-white);
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--space-lg);
font-size: 1.5rem;
z-index: 1000;
transform: translateX(-100%);
transition: transform 0.2s ease;
}
.header_menu-list.active {
transform: translateX(0);
}
.header_burger-btn.active .header_burger-icon {
display: none;
}
.header_burger-btn.active .header_close-icon {
display: block;
}
.header_burger-btn {
position: relative;
z-index: 1001;
}
}
.hero {
width: 100%;
padding: var(--space-lg) var(--space-sm);