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
|
|
|---|