Chapitre 2
Interface et menus

Retour Accueil CSS

16 Barre de menu fixe

Termes CSS clés employés : position.
Compatibilité navigateurs : tous.

Problématique

Dans le cas de page très longue, un défilement est nécessaire pour permettre la lecture en intégralité. L’objectif est de posséder une barre de menu fixe, toujours placée en haut de la portion de page affichée.

Résolution théorique

Le contenu et le menu doivent situer dans des éléments structurels distincts. Il faut employer pour le menu la propriété position fixée à absolute, et recourir à la propriété z-index pour s’assurer que le menu sera toujours au premier plan.

Résolution pratique

Nous créons en HTML deux éléments DIV conteneurs, un pour le contenu et un pour le menu.
<DIV class=contenu> <H1>Titre</H1> <P>Contenu</P> … </DIV> <DIV class=menu> Contenu du menu </DIV>
Le code CSS est le suivant :
DIV.contenu { z-index: 1; padding-top: 3em; } DIV.menu { position: fixed; top: 0; left: 0; width: 100%; border: 1px solid #000000; z-index: 2; text-align: center; background-color: #ffffff; line-height: 2em; }
Un exemple est inutile, puisque le menu de cette page est construit selon ce principe : même en descendant dans la page, il reste affiché en haut à gauche de l'écran.


Retour Accueil CSS

© 1999-2014 Fabrice "Fyndhorn Elder" Lemainque
Get Firefox!