logo

blog

My website can't be that messy, right? git clone https://hacktivis.me/git/blog.git
commit: 5244720d8d97fa6340de0c0a0e4d767fae55b5eb
parent 69752b5101a11248c46fdeeb6ce4e3f8379b04c0
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date:   Sat, 16 Mar 2019 22:45:26 +0100

<nav> is now keyboard-accessible

Thanks to [1] for the hint on `:focus-within`.

1: https://css-tricks.com/solved-with-css-dropdown-menus/

Diffstat:

Mcss/index.css17++++++++++++++---
Mtemplates/en/nav.shtml4++--
Mtemplates/fr/nav.shtml4++--
3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/css/index.css b/css/index.css @@ -109,11 +109,15 @@ nav ul li { display: inline-table; transition: 0.5s; } +nav li:focus-within, nav li:hover { background-color: var(--dark-ansi05); color: var(--dark-ansi00-soft); } -nav ul li:hover > ul {display: block;} +nav ul li:focus-within > ul, +nav ul li:hover > ul { + display: block; +} nav ul ul { background: var(--dark-ansi05); color: var(--dark-ansi00-soft); @@ -121,8 +125,15 @@ nav ul ul { position: absolute; } nav ul ul li { display: block; } -nav ul ul li:hover { background: var(--dark-ansi13); } -nav ul ul li:hover:active { font-weight: normal; } + +nav ul ul li:focus-within, +nav ul ul li:hover { + background: var(--dark-ansi13); +} +nav ul ul li:hover:active, +nav ul ul li:focus-within:active { + font-weight: normal; +} nav ul ul ul { left: 100%; position: absolute; diff --git a/templates/en/nav.shtml b/templates/en/nav.shtml @@ -1,12 +1,12 @@ <nav> <ul class="menus"> <li><a href="/home">Home</a></li> - <li class="menu"><span>Myself</span><ul> + <li tabindex="0" class="menu"><span>Myself</span><ul> <li><a href="/about">About</a></li> <li><a href="/librism">Désintox’ / FOSS activism</a></li> <li><a href="/animelist">Anime List</a></li> </ul></li> - <li class="menu"><span>Pages</span><ul> + <li tabindex="0" class="menu"><span>Pages</span><ul> <li><a href="/abgilpqt+">ABGILPQT+</a></li> <li><a href="/bookmarks">Bookmarks</a></li> <li><a href="/coding%20style">coding style</a></li> diff --git a/templates/fr/nav.shtml b/templates/fr/nav.shtml @@ -1,12 +1,12 @@ <nav> <ul class="menus"> <li><a href="/accueil">Accueil</a></li> - <li class="menu"><span>Perso’</span><ul> + <li tabindex="0" class="menu"><span>Perso’</span><ul> <li><a href="/%C3%A0%20propos">À propos</a></li> <li><a href="/librisme">Désintox’ / Engagement libriste</a></li> <li><a href="/animelist">Anime List(en)</a></li> </ul></li> - <li class="menu"><span>Pages diverses</span><ul> + <li tabindex="0" class="menu"><span>Pages diverses</span><ul> <li><a href="/bitoduc">Bitudoc (termes info’ en français)</a></li> <li><a href="/antisèche-nginx">Antisèche nginx</a></li> </ul></li>