Header

Le header peut vous permettre d'avoir un en-tête pour votre page web.

Comment l'utiliser

Dans le HTML

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

Pour faire l'animation en mobile, il faut ajouter la classe header__toggle et js__toggle sur la balise voulue.

exemple de code complet

Dans le CSS

.header

Il faut styliser le header!

Pour commencer, il faut déterminer la valeur de la hauteur du header, la largeur du logo,

et le centrage du texte.

Ensuite, il faut ajouter du padding! Il faut aussi déterminer la hauteur du header,

la largeur du header et l'index pour l'afficher par dessus.

Il faut spécifier le type de position et la position.

Il faut aussi ajouter la transition de l'animation.

Ensuite, il faut ajouter un before pour déterminer le fond.

Les valeurs de la position sont pareilles au header, mais le type est différent.

Aussi, l'index détermine qu'il est en dessous du texte.

Ajoutons du style en mode mobile!

Si le site est vu en mode mobile, il y aura du padding qui va s'ajouter

et le texte va se centrer.

Pour finir, il reste la classe .header-is-hidden et .is-scrolling-down!

Mettre un transform avec une translation à -100% et 4px.

.header__brand

Pour rendre le logo du header tout propre, il faut lui ajouter de la couleur et sa position selon la taille de la page.

.header__toggle

Il faut d'abord déterminer le menu hamburger, créer une variable pour la largeur des lignes et son emplacement.

Ensuite, nous devons ajouter le code CSS pour le span (les lignes blanches) pour la couleur, l'emplacement et la largeur.

Après, il faut ajouter une transition pour l'animation du x. Quand nous allons cliquer sur le menu hamburger, la première et dernière ligne va former un x pour indiquer que le nav est actif.

Pour finir, il faut ajouter que le menu hamburger se cache en mode desktop.

.nav-primary

Nous allons faire un fond pour le header et sa navigation. Nous ajustons la couleur, la position et l'animation pour qu'il se cache.

Ensuite, nous allons ajuster le look du header vu que nous allons en mode mobile. Il faut ajuster le position et mettre l'animation si la navigation a été active.

Pour finir, nous allons placer la liste sur les deux côtés du logo en desktop et la cacher en mode mobile. Il faut aussi faire un petit calcul pour le menu 3, vu qu'il y a un décallage.

.nav-is-active

Afin de bloquer le scroll sur le body pendant que la navigation est active.

.nav-primary__item

Pour commencer, il faut mettre du CSS sur les éléments de la liste. Il faut régler sa taille, sa couleur et sa position.

Il faut ajouter une ligne pour le moment où il y aura un hover en mettant une position, un fond et une transition.

Pour poursuivre, nous enlèvons l'animation en mode mobile, mais nous gardons la même taille de texte.

Nous conservons la ligne et la petite animation.

Pour finir, nous allons faire agrandir la ligne lorsqu'on est sur l'élément.

Classe d'états

.is-scrolling-up/.is-scrolling-down

La classe is-scrolling-up et is-scrolling-down servent à déclencher les animations vers le haut et vers le bas.

.header-is-hidden

Une autre classe ajoutée avec du JavaScript!

La classe .header-is-hidden sert à pouvoir cacher ou non le header

lorsque les classes .is-scrolling-up/.is-scrolling-down sont activées.

Les options ajustables

data-auto-hide

Permet d'ajouter une limite à laquelle le header se cache de façon automatique.

data-scroll-limit

Permet de limiter la quantité de scrolling à faire afin que l'animation du header se déclanche.

Voir un démo de « header »