UN EXEMPLE D'HABILLAGE DE LISTE :
menu vertical, sans puce, avec effet de survol

Exemple

CODE SOURCE CSS ET HTML

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
ul.liste, .liste li, .liste a {padding:0px ; margin:0px} /*met à 0 les marges internes et externes de la liste et des liens */

.liste {width :15em ; /* largeur de la liste : environs 15 lettres majuscules - voir em */
list-style-type:none} /* suppression des boutons CSS devant les items de la liste */

.liste li a {border-left:1.5em solid gray ; /* crée un gros carré gris à gauche des liens non survolés */
background-color:#CCD ; /* couleur de fond des liens non survolés */
display:block; /* force le lien à prendre 100% de la largeur de la liste */
padding-left:0.5em ; /* insère un espace entre le texte du lien et le gros carré gris */
color:black ; /* la police des liens non survolés est noire */
text-decoration:none ; /* on suprime le soulignement des liens */
height:1.5em} /* hauteur de chaque ligne. N'est indispensable que pour IE 5.0 et 5.5 */

.liste li a:hover { /* style des liens lors du survol */
background-color:black ; /* le fond du lien passe au noir */
color:white ; /* le texte passe au blanc */
border-left-color:red} /* crée un gros carré rouge à gauche des liens survolés */
</style>
</head>

<body>
<ul class="liste"><!-- liste -->
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 4</a></li>
</ul>
</body>
</html>

 

COMMENTAIRES

Les listes HTML sont la façon la plus simple de réaliser un menu. Pour en savoir plus.

Grace aux CSS, on peut faire un habillage graphique assez complexe. Nous ne verrons pas ici toutes les possibilités (elles sont infinies), mais les principes de base. Pour avoir des idées sur les habilages possibles : listamatic.

On peut 6 types de listes : sans puce, avec les puces standards, avec des puces issues de fichiers graphiques. Et à chaque fois, en affichage vertical ou horizontal.

Le 1er exemple, ci-contre est une liste verticale sans puce, ou on joue sur la bordure gauche qu'on a rendue très épaisse, pour obtenir un carré. On a aussi ajouté des effets de survol. Cet exemple est tiré de listamatic, mais modifié pour mieux passer sous Internet Explorer.

On peut très bien adapter ce code pour utiliser les habillages expliqués dans "boutons", et en particulier dans "bouton 2". Essayez !

Marche sous les navigateurs Gecko (Mozilla, Firefox,...), Internet Explorer 5 et supérieur (avec un léger défaut sous IE5.0) et opéra.