29. Création d'un menu en CSS
Nota : Ni les bugs, ni les techniques de contournement de bugs sur les explorateurs peu respectueux des standards ne seront évoqués.
Avant toute chose, ne regardez pas la solution avant d’avoir essayé de faire l’exercice !
Nous allons ici apprendre à construire un menu accessible à tous les navigateurs.
Données:
HTML
<ul id="menuVertical">
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
<li><a href="#">Lien 4</a></li>
</ul>
- Un menu est une liste de liens hypertextes. <ul> crée une liste non ordonnée. <li> (de type bloc) correspond à chaque objet de la liste.
- Mettre un identifiant à <ul> pour le différencier des éventuelles autres listes de la page.
- Des puces rondes préfixent les éléments du menu ; les liens sont bleus, soulignés.
<ul id="menuVertical">
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
<li><a href="#">Lien 4</a></li>
</ul>
- Un menu est une liste de liens hypertextes. <ul> crée une liste non ordonnée. <li> (de type bloc) correspond à chaque objet de la liste.
- Mettre un identifiant à <ul> pour le différencier des éventuelles autres listes de la page.
- Des puces rondes préfixent les éléments du menu ; les liens sont bleus, soulignés.
Chaque point correspond à une consigne.
Créer un menu vertical
• Supprimer les marges internes et externes de la balise <ul> (qui changent d’un navigateur à l’autre et risquent).
• Spécifier une police.
• La propriété list-style-type porte sur la représentation des puces. La valeur none les supprime.
• Les liens seront colorés et non soulignés.
• Aérer les différents liens du menu (pour cette fois on augmentera l’interligne de l’élément <a> via la propriété line-height)
• Remplacer les liens hypertextes par des zones cliquables.
• Ajouter un effet de relief sur les boutons (inverser l’épaisseur et la couleur des bordures lorsque la pseudo-classe :hover est utilisée).
• Spécifier une police.
• La propriété list-style-type porte sur la représentation des puces. La valeur none les supprime.
• Les liens seront colorés et non soulignés.
• Aérer les différents liens du menu (pour cette fois on augmentera l’interligne de l’élément <a> via la propriété line-height)
• Remplacer les liens hypertextes par des zones cliquables.
• Ajouter un effet de relief sur les boutons (inverser l’épaisseur et la couleur des bordures lorsque la pseudo-classe :hover est utilisée).
Votre menu est prêt !
Créer un menu horizontal
• Commencer par trouver les propriétés à éliminer pour faire ce menu.
• Les éléments de la liste (éléments bloc) doivent être alignés.
• Ajouter des puces graphiques personnalisées aux listes (une possibilité est de se servir de la propriété list-style-image et list-style-position: inside).
• Associer une image de fond (différente ou non) à chaque objet de la liste.
• Les éléments de la liste (éléments bloc) doivent être alignés.
• Ajouter des puces graphiques personnalisées aux listes (une possibilité est de se servir de la propriété list-style-image et list-style-position: inside).
• Associer une image de fond (différente ou non) à chaque objet de la liste.
Publicité