ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve the accecibility of the mobil menu. Also switch to SVG hamburger icon that is animated.

Browse source
This commit is contained in:
Fredrik Jonsson 2022-12-21 10:05:10 +01:00
commit 7f91caaf5d
1 changed files with 91 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

14
layouts/partials/mobilemenu.html
View file

@ -1,12 +1,18 @@
<div class="mobile-nav" dir="ltr">
<div class="mobile-nav__cover"></div>
<a href="#navigation" class="mobile-nav__toggle" aria-haspopup="true" role="button">{{ i18n "menu_mobile" }}</a>
<div class="mobile-nav__sheet">
<button class="mobile-nav__toggle" aria-expanded="false" aria-controls="sheet">
{{ i18n "menu_mobile" }}
<svg class="mobile-nav__hamburger" viewBox="0 0 100 100" focusable="false" aria-hidden="true">
<rect width="80" height="12" x="10" y="20" rx="5"></rect>
<rect width="80" height="12" x="10" y="45" rx="5"></rect>
<rect width="80" height="12" x="10" y="70" rx="5"></rect>
</svg>
</button>
<div class="mobile-nav__sheet" id="sheet" aria-hidden="true">
<div class="mobile-nav__region">
{{ if site.IsMultiLingual }}{{ partial "language-selector.html" . }}{{ end }}
</div>
<nav class="mobile-nav__main-menu">
<h2 class="visually-hidden">{{ i18n "menu_title" }}</h2>
<nav class="mobile-nav__main-menu" aria-label="{{ i18n "menu_title" }}">
<ul class="mobile-nav__navbar">
{{ if site.Menus.main -}}