GoupillWiki

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
======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>'' :

<code html>
<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>
</code>

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

<code css>
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;
}
</code>

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 ''<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 [[https://jsfiddle.net/gromax/8rcpx64L/6/|ici]].

La partie importante est :

<code css>
position:absolute;
top: 5px;
left:5px;
</code>

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