Navigation "push top JS"

Navigation "Push Top" : au clic/tap sur le bouton burger, la partie principale se décale vers le bas, laissant découvrir la navigation.

• JavaScript pour le comportement "touch"
• CSS pour les styles et les transitions

Le principe général est celui-ci :

• "main" s'affiche par dessus "navigation". Ce dernier étant en position absolute et z-index inférieur.
• JavaScript s'occupe de l'action "touch" en ajoutant/retirant la classe ".is-opened" sur "main".

Accessibilité :

• La navigation au clavier est possible (la méthode focus() donne le focus à la navigation après avoir actionné le bouton burger)
• Le bouton burger est entouré (outline) lors de la navigation clavier uniquement (pas au clic), grâce à :focus-visible

Grid Layout est ici employé pour :

• Le bouton burger (grille de 3 rangées, avec pseudo-éléments ::before et ::after)
• La navigation (espacements internes grâce à gap)