Motifs de base
Les extraits de code présentés dans cette rubrique rassemble les composants les plus coutants utilisés dans une page web : bannière, menu, fil d'ariane et liens d'accès rapide et de retour en haut.
Code de base
La structure de base d'un document HTML doit comporter impérativement plusieurs balises sémantiques appelées aussi régions.
- HTML
- CSS
Lien d'accès rapide
Un lien d'accès rapide permet d'accéder rapidement à une zone de contenu de la page ou de sauter une zone dans la page.
- HTML
- CSS
Bannière collante
Une bannière collante dynamique. Au défilement de la page vers le bas, la bannière du haut disparaît ; elle réapparaît lors du défilement de la page vers le haut.
- HTML
- CSS
- JS
Menu déroulant horizontal
Extrait de code pour un menu déroulant, horizontal et adaptatif avec bouton dit « hamburger ».
- HTML
- CSS
- JS
Menu multi-déroulant horizontal
Extrait de code pour un menu déroulant, horizontal et adaptatif avec bouton dit « hamburger ».
- HTML
- CSS
- JS
Menu type « menubar »
Extrait de code pour un menu déroulant horizontal utilisant les rôles aria 'menubar', 'menu' et 'menuitem'.
- HTML
- CSS
- JS
Menu latéral glissant
Extrait de code pour un menu latéral qui s'ouvre et se ferme avec un focus clavier accessible.
- HTML
- CSS
- JS
Menu latéral glissant avec icônes
Extrait de code pour un menu latéral qui s'ouvre et se ferme avec un focus clavier accessible. Le menu sous sa forme résuite présente des icônes et leur signification dans une info-bulle.
- HTML
- CSS
- JS
Fil d'ariane
Un fil d'ariane est un système de navigation qui fournit une aide visuelle pour indiquer à l'utilisateur où il se trouve dans la hiérarchie du site.
- HTML
- CSS
Retour en haut
Extrait de code pour un lien de retour en haut de page apparaissant lors du défilement de la page.
- HTML
- CSS
- JS