UN MENU FIXE
Le menu que vous voyez à droite de cette page est une simple liste UL (
source: http://www.w3.org/Style/Examples/007/menus.fr.html)
. Mais il reste fixe lorsque vous faites défiler la page (vous aurez peut-être à réduire d'abord la taille de la fenêtre pour obtenir la barre de défilement). Tout le travail nécessaire à ce qu'il reste à la même place est fait par des règles de la feuille de style. Voici le codage du menu, repris directement depuis le code source de cette page:<ul id=menu>
<li><a href="#L384">Section 1</a>
<li><a href="#details">Section 2</a>
<li><a href="#FAQ">Section 3</a>
</ul>
Dans un navigateur ne supportant pas CSS, ou dont CSS est désactivé, il apparaîtra comme une liste normale avec des liens. Mais avec CSS, grâce aux règles ci-dessous, il semblera "flotter" au dessus de la page, 'épinglé' sur le bord droit de la fenêtre du navigateur:
#menu {
position: fixed;
right: 0;
top: 50%;
width: 8em;
margin-top: -2.5em;
}
La règle la plus intéressante ici est la règle 'position: fixed', qui fait que le DIV reste fixe à l'écran. Les règles 'top: 50%' et 'right: 0' déterminent où le DIV est affichée, en l'occurrence: 50% en bas par rapport au bord haut de la fenêtre, et à une certaine constante du bord droit (0px). Les autres propriétés, margins, borders, colors, etc., peuvent être ajoutées en fonction du goût personnel.
Il existe également les propriétés 'left' et 'bottom', pour 'épingler' les éléments au bord gauche ou au bas de l'écran.
