Skip to content

馃摝 NEW: collapsible mobile navigation

Jonas Sulzer requested to merge mobile-menu-ui into master

The original navigation has been designed to be as simple as possible and adapts to mobile layout without any javascript. During events, when instructing people to visit our website, I've seen a lot of persons confused with the navigation on mobile. The current navigation / page looks like this:
image
The user sees the menu items, great, but has no idea that the actual content of the site is below that. This gets even more confusing once the user clicks on one of the menu items - the page loads - and - the user again sees the same screen showing only the navigation. Thinking it didn't work, the user clicks again on the menu item and either accidentally realizes that the page is scrollable and the content is below the navigation or just leaves the page.
In this MR I propose to replace this "always expanded/visible navigation" by a hamburger menu (three horizontal bars), leaving the beginning of the page content visible below on a usual mobile screen. Upon click on the hamburger menu, the navigation expands:
Screencast_from_2023-12-21_00-54-07
This implementation still works without any javascript, by using a hidden checkbox combined with css to open the menu when the checkbox is "selected" and close it again when the checkbox is "deselected". The navigation also closes when clicking on one of the navigation items as this triggers a pageload and the menu is always closed/collapsed in initial state after pageload.

I need some help though: we need to test this in different browsers, especially mobile ones to check that it works correctly everywhere:

  • Firefox (Android)
  • Chromium (Android)
  • Safari (iOS) Any volunteers to give this a go ?
Edited by Jonas Sulzer

Merge request reports