From 8da30eba4b3d1382a25487f845e4fc2eb4ea96c3 Mon Sep 17 00:00:00 2001
From: "Huste, Tobias" <t.huste@hzdr.de>
Date: Mon, 17 Apr 2023 10:02:47 +0200
Subject: [PATCH] Make Hamburger menu tabbable
---
_includes/header.html | 11 ++++-------
_sass/common/_header.scss | 20 +-------------------
assets/js/header.js | 12 ++++++++++++
3 files changed, 17 insertions(+), 26 deletions(-)
diff --git a/_includes/header.html b/_includes/header.html
index 60990c645..354023dae 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -45,14 +45,11 @@ See also:
The search button shall always be visible.
{% endcomment %}
<a href="{{ 'search' | relative_url }}" class="outer-nav-item"><i class="fas fa-search"></i></a>
+ <button onclick="toggleMenu();scrollableHeader()" type="button" class="nav_toggle" id="menu-button">
+ <i class="fas fa-bars"></i>
+ </button>
- {% comment %}
- The following button shall be always minimized (hamburger menu).
- {% endcomment %}
- <input type="checkbox" id="mobile_toggle" class="d-none">
- <label for="mobile_toggle" class="nav_toggle" onclick="scrollableHeader()"></label>
-
- <nav>
+ <nav id="menu">
<ul class="nav-grid">
{% for category in site.data.navigation.header %}
<li class="nav-first-level">
diff --git a/_sass/common/_header.scss b/_sass/common/_header.scss
index 53d2a167a..3e4988f15 100644
--- a/_sass/common/_header.scss
+++ b/_sass/common/_header.scss
@@ -105,27 +105,9 @@
&:focus {
color: $color-helmholtz-bright-blue;
}
-
- &:before {
- font: var(--fa-font-solid);
- content: "\f0c9";
- }
- }
-
- /*
- This SCSS part is used to mimic the behavior, previously implemented
- via Javascript, in pure CSS using a technique called "Checkbox Hack"
- https://css-tricks.com/the-checkbox-hack/. This works by connecting
- a <label> with <input type="checkbox"> and hiding the <label>.
- Clicking on the label toggles the :checked state of this ID and allows
- for applying different style.
- */
- #mobile_toggle:checked ~ .nav_toggle::before {
- content: "\f00d";
- color: $color-helmholtz-blue;
}
- #mobile_toggle:checked ~ nav {
+ .nav-expanded {
display: flex;
flex-direction: column;
diff --git a/assets/js/header.js b/assets/js/header.js
index f3b0fb594..aa7c468a2 100644
--- a/assets/js/header.js
+++ b/assets/js/header.js
@@ -21,3 +21,15 @@ function scrollableHeader() {
document.getElementById("header").classList.toggle("scrollable-header");
document.body.classList.toggle("no-scroll");
}
+
+function toggleMenu() {
+ document.getElementById("menu").classList.toggle("nav-expanded");
+ menuIconClassList = document.getElementById("menu-button").firstElementChild.classList;
+ if (menuIconClassList.contains("fa-bars")) {
+ menuIconClassList.remove("fa-bars");
+ menuIconClassList.add("fa-x");
+ } else {
+ menuIconClassList.remove("fa-x");
+ menuIconClassList.add("fa-bars");
+ }
+}
--
GitLab