Header

La composante Header a 2 rôles complémentaires.

  1. Elle ajoute un mécanisme qui cache ou affiche le <header> selon le défilement de la page afin que.
  2. Elle ajoute la gestion d'un menu mobile qui affiche ou cache la navigation au clic du « menu burger».

Comment l'utiliser

DANS LE HTML

Afin d'utiliser la composante, mettre l'attribut data-component="Header" directement sur la balise <header>.

Ensuite, vous devez ajouter la classe préfixée js-toggle sur le <button> qui devra être cliqué pour ouvrir/fermer le menu mobile.

exemple de code complet

LES STYLES

Plusieurs éléments sont importants dans la mécanique de cette composante

.header__toggle

Généralement, c'est l'élément qui contient aussi la classe .js-toggle , soit celle qui ajoute déclenche l'ouverture/fermerture du menu mobile par l'ajout de classes d'états globales en CSS. Les styles par défaut transforment l'icône entre un menu « hamburger » et un « x » selon la présence de la classe d'état globale .nav-is-active <>

.nav-primary

Cette classe se trouve sur la balise <nav> et sert à style cette dernière différement pour l'état mobile. Lorsque l'état mobile est activé via une media query , cette balise se transforme grâce au CSS et prend alors tout l'espace de l'écran pour afficher le menu mobile, toujours avec la présence de la classe d'état globale .nav-is-active

Voir un démo de la composante

Classes d'états

La composante utilise deux classes d'états globales. Les styles les utilisent pour afficher ou cacher divers éléments liés à la composante Header. Pour toutes les classes suivantes, elles sont ajoutées sur la balise <html>.

.is-nav-active

Ajoutée lorsqu'un clic sur le menu « hamburger » survient. Ce dernier se transforme alors en « x ». Lorsque ce dernier est cliqué, la classe d'état est alors retirée.

.is-header-hidden

Ajoutée lorsque le défilement dans la page a dépassé le pourcentage paramétré (treshold) , sinon, elle est retirée.

.is-scrolling-down OU .is-scrolling-up

Ces classes ne sont jamais présentes en même temps. Elles indiquent la direction du défilement dans la page.

Paramètres

Les paramètres permettent d'ajuster des options précises afin de personaliser davantage le comportement du Header.

THRESHOLD

Ce paramètre permet de modifier le pourcentage de défilement requis afin de cacher la composante Header via la classe .header-is-hidden. Valeur par défaut (0.1, soit 10%).

Voir un démo de « threshold »

ALWAYS-SHOW

Par défaut, le Header se cache au défilement au delà du threshold . La présence de ce paramètre l'empêche simplement de se cacher et il reste toujours visible.

Voir un démo du « always-show »