Introduction
Ce guide explique comment créer un menu réactif à l'aide de CSS. Ce genre de menu est normalement monté avec Javascript ou DHTML
Ce système de menu a été testé sous
:
Cette version utilise une liste HTML. Le code HTML a été réduit au minimum, ce qui est une bonne chose.
L'utilisation d'une liste HTML demande moins de code et cette méthode est fortement recommandée.
Note : Normalement, il est difficile de prévoir l'apparence d'une liste HTML, sans compter les nombreux "bugs" qui peuvent survenir, mais à l'aide de CSS, il est facile de prendre le contrôle et ainsi parvenir au résultat souhaité.
Étape 1
Pour commencer, créer un contenant <div> qui contiendra le menu. Par exemple :
<div id="mon-menu">
</div>
À cette étape, nous devons déterminer la largeur :
#mon-menu {
width: 132px;
/* la largeur indiquée (width) est aussi affectée par les
marges (padding). Ce point sera discuté un peu
plus loin. */
}
Étape 2
Maintenant, créer des liens fictifs en utilisant une liste non ordonnée en HTML :
Étape 3
Par la suite, nous devons retirer l'indentation. Il est aussi nécessaire de retirer les puces.
#mon-menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
En indiquant des marges (margin et padding) de zéro, cela permet d'éliminer l'espace pour les navigateurs IE/Opera et Netscape/Mozilla. À cette étape, nous pouvons également définir le style du texte en ajoutant le code CSS suivant :
font-family: verdana, arial, sanf-serif;
font-size: 12px;
Afin d'améliorer l'apparence du menu, il est souhaitable d'ajouter un peu d'espace entre les éléments de la liste. Simplement ajouter le code CSS suivant :
#mon-menu li {
margin: 2px 0 0 0;
}
Ce qui ajoute une marge de 2 pixels au dessus de chaque élément de la liste.
Note : à cette étape, il est préférable d'indiquer le style de police du contenant <div id="mon-menu">, sinon les marges ne s'afficheront pas correctement avec Internet Explorer.
Voici donc le résultat de l'étape 3 :
Étape 4
Maintenant, nous devons ajouter quelques styles aux liens.
#mon-menu a {
display: block;
width:120px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #dcdcdc;
text-decoration: none; /*permet de retirer le soulignement des liens*/
}
Note importante concernant la largeur du menu
Lorsque cette méthode a été testée, nous avons constaté que si la largeur n'est
pas indiquée, le menu ne s'affichera pas correctement avec Internet Explorer 6.
La largeur, combinée avec les marges de côté, doit correspondre à la largeur
indiquée pour le contenant <div> de l'étape 1, soit 120 pixels + (2 pixels + 10 pixels) = 132 pixels
Ce qui donne le résultat suivant :
Étape 5
La dernière étape consiste à créer l'effet de survol de la souris. Comme tous les liens, cet effet est obtenu avec l'utilisation de pseudo classes, ce qui permet de contrôler l'apparence des liens visités, actifs et survole :
#mon-menu a:link, #mon-menu a:active, #mon-menu a:visited {
color: #000000;
}
#mon-menu a:hover {
border: 1px solid #000000;
background: #333333;
color: #ffffff;
}
Ce qui donne le résultat suivant :
Pour ajouter encore plus de style, nous pouvons utiliser une image d'arrière-plan pour l'effet de survol :
#mon-menu a:hover {
border: 1px solid #000000;
background: #333333 url(images/arriere-plan.gif);
color: #ffffff;
}
Ce qui donne le résultat suivant :
Voici l'image d'arrière-plan utilisée :
Pour terminer, si vous ajoutez onfocus="this.blur()" au code de chaque lien, cela empêchera l'affichage des lignes pointillées qui s'affichent lorsqu'un lien est cliqué.
