======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 '''' :



    
        Accueil
        Biographie
        Filmographie

===== 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 [[https://jsfiddle.net/gromax/ghvnqs49/7/|jsFiddle]]. Vous pouvez ainsi tenter des expériences. Quelques explications sur le css : * ''div.menu ul li a'' : correspond à un lien '''' qui serait contenu dans une balise item de liste ''

'' elle-même contenu dans une balise de liste non numérotée ''

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


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