Un menu simple en HTML

Le besoin

On a 3 ou 4 pages et on voudrait pouvoir naviguer entre elles. Je propose ci-dessous une façon simple de réaliser un menu. Ce menu devra être copier dans toutes les pages. Il est fixe.

Une situation pour fixer les idées

On dira que l'on dispose de 4 pages :

l'accueil : index.html
une page biographie : biographie.html
une page filmographie : filmographie.html

Le menu a mettre dans toutes les pages

On le met où on veut, par exemple juste après <body> :

<div class='menu'>
    <ul>
        <li><a href='index.html'>Accueil</a></li>
        <li><a href='biographie.html'>Biographie</a></li>
        <li><a href='filmographie.html'>Filmographie</a></li>
    </ul>
</div>

Le style

Pour l'instant le menu est laid. C'est une liste à puces avec des liens.

Comme ce n'est pas évident, je vous propose un bout de style tout fait :

div.menu {
  background-color:#EEEEEE;
  padding:10px;
  width:200px;
  float:left;
  margin:10px;
}

div.menu ul {
  list-style:none;
}

div.menu ul li {
  border: 1pt solid #FF0000;
}

div.menu ul li a {
  display:block;
  background-color:#FFAAAA;
  padding:5px;
  text-decoration:none;
}

div.menu ul li a:hover {
  background-color:#FFCCCC;
}

Vous trouverez cela en action sur ce jsFiddle. Vous pouvez ainsi tenter des expériences.

Quelques explications sur le css :

div.menu ul li a : correspond à un lien <a> qui serait contenu dans une balise item de liste <li> elle-même contenu dans une balise de liste non numérotée <ul> elle même contenu dans un <div> ayant la classe menu. On peut donc finement sélectionner les éléments qui reçoivent un style.
Le dernier élément avec :hover, c'est un lien quand on passe le curseur de souris au-dessus.
Certains éléments sont là pour casser la façon normale dont les choses s'affichent. Normalement une liste <ul>, c'est une liste à puces. On ne veut pas de puce ici donc list-style:none;. Normalement, les liens apparaissent avec un soulignement. Ici on veut que les liens ressemblent à des boutons de menu, sans le soulignement donc text-decoration:none;.
On veut que le menu se mette sur la gauche : float:left;.

Cas absolute

Il est possible de positionner le menu à une place de façon qu'il ne bougera pas, même si on descend dans la page. On appelle cela un positionnement absolu, en pixels par rapport aux bords de la fenêtre. Vous trouverez un exemple ici.

La partie importante est :

position:absolute;
top: 5px;
left:5px;

top donne la distance par rapport au haut de la fenêtre et left est la distance par rapport au bord gauche.