geo/geo-coop
geo/geo-coop
7
1
Fork 0
Code Issues 54 Pull requests Projects Releases Packages Wiki Activity Actions

Proof of concept for a more appropriate accessible 'hamburger' menu

Browse source 
From https://unused-css.com/blog/css-only-hamburger-menu/

Ref #114 #126
This commit is contained in:
benjamin melançon 2025-07-15 12:51:30 -04:00
parent c2f931f06a
commit d56ee8dcee
2 changed files with 112 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

116
web/themes/custom/geofresco/src/global/_layout.scss
View file

@ -64,21 +64,113 @@
}
// Main navigation, goes to code in page.html.twig
details .burger-icon {
cursor: pointer;
.hamburger-container {
width: max-content;
position: absolute;
top: 10px;
right: 10px;
color: white;
transition: transform 0.5s ease;
}
/* We don't need the checkbox to be visible, but we can't set it to display: none because this will break keyboard navigation. Instead set the opacity to 0 and the position to absolute so it doesn't push the rest of the content down */
.hamburger-container .checkbox {
opacity: 0;
position: absolute;
}
/* Show an outline when the hamburger is selected using the keyboard. Older browsers don't support :focus-visible, so we will just use :focus here. */
.hamburger-container .checkbox:focus ~ .hamburger {
/* Not all browsers support outline: auto, so set a sensible fallback outline. */
outline: 2px solid white;
outline: auto;
outline-offset: 4px;
}
/* For newer browsers that do support :focus-visible, hide the outline when the checkbox isn't selected with the keyboard. */
@supports selector(:focus-visible) {
.hamburger-container .checkbox:not(:focus-visible) ~ .hamburger {
outline: none;
}
}
/* Hide any focusable elements in the drawer by default to aid keyboard navigation. We use visibility so it makes the elements unfocusable, but doesn't affect the layout. We can also add a "transition" to visibility, which will make it show instantly when we open the drawer, but take half a second to hide it when we close the drawer. */
.hamburger-container .drawer a {
visibility: hidden;
transition: visibility 0.5s linear;
}
/* Make the focusable elements in the drawer visible when it is open. */
.hamburger-container .checkbox:checked ~ .drawer a {
visibility: visible;
}
.hamburger-container .checkbox:checked ~ .drawer {
transform: translateX(0%);
}
.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(1) {
transform: translateY(12px) rotate(45deg);
}
.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(2) {
opacity: 0;
}
.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(3) {
transform: translateY(-12px) rotate(-45deg);
}
.hamburger {
width: 32px;
height: 32px;
position: relative;
display: block;
margin-left: auto;
margin-right: 0;
padding: 1.25rem 2.5rem 1rem 1.5rem;
width: 1.5rem;
height: 1.5rem;
transition: transform 0.1s;
transition: transform 0.5s ease;
z-index: 1;
cursor: pointer;
padding-top: 5px;
}
details[open] .burger-icon {
transform: rotate(90deg);
.hamburger .slice {
display: block;
width: 100%;
height: 2px;
background-color: white;
transition: all 0.5s ease;
}
summary {
list-style-type: none;
.hamburger .slice:not(:first-child) {
margin-top: 10px;
}
.drawer {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: max-content;
max-width: 100%;
padding: 22px;
background: black;
transform: translateX(-100%);
transition: transform 0.5s ease;
}
.drawer .nav-list {
padding: 0;
list-style: none;
margin-top: 30px;
margin-left: 20px;
}
.drawer .nav-list .nav-list-item {
padding-bottom: 10px;
}
/* Make the drawer full-width on mobile */
@media screen and (max-width: 768px) {
.drawer {
width: 100%;
}
}

18
web/themes/custom/geofresco/src/templates/layout/page.html.twig
View file

@ -23,15 +23,14 @@
{% block navbar_branding %}
{{ page.navbar_branding }}
{% endblock navbar_branding %}
<nav class="navigation column">
<details>
<summary>
<div class="burger-icon"><svg aria-label="Navigation Menu" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 4h24M0 12h24M0 20h24" stroke="black" stroke-width="2" />
</svg></div>
</summary>
<div class="columns">
<nav class="navigation column hamburger-container">
<input class="checkbox" type="checkbox" id="hamburger-toggle" aria-label="Toggle Navigation"/>
<label class="hamburger" for="hamburger-toggle">
<span class="slice"></span>
<span class="slice"></span>
<span class="slice"></span>
</label>
<div class="columns drawer">
{% block navbar_social %}
{% if page.navbar_social %}
<div class="column is-narrow">
@ -53,7 +52,6 @@
{% endif %}
</div>
</details>
</nav>
</div>
{% if is_front %}