all html : Le portail des webmaster

Créer un menu actif avec cellules colorées en CSS

Cet article est actuellement publié sur le site.

Article publié le jeudi 22 juin 2006 par tomasevans.
Cet article est classé dans les catégories « CSS »

À l'aide de ce tutoriel, vous pourrez créer un menu simple à modifier dont les cellules se colorent lors du passage de la souris. Utilise UL et LI, mais l'astuce est que tous vos ul et li ne deviendront pas une navbar.

Partie 1: Régler Navbar2 selon div#

Tout d'abord, il vous faut régler les détails de la navbar même.
div#navbar2 { }
Sa hauteur height: 30px;
Sa longueur width: 100%;
Le rendu est meilleur avec 100%, ansi vous êtes sûr de pouvoir mettre autant de liens que vous voulez ;)

ensuite, la bordure, son option et sa couleur (vous pouvez enlever la couleur si vous désirez que le taleau ne soit pas visible) et la largeur de la bordure.
border-top: solid #000 1px; border-bottom: solid #000 1px;

ça vous donne, une fois que vous avez tout fait, ceci:
div#navbar2 { height: 30px; width: 100%; border-top: solid #000 1px; border-bottom: solid #000 1px; }

Partie 2: Régler <UL> selon div#

Explications pour la suite le div# permet que tous vos UL ou LI n'appliquent pas le script, mais seulement si vous appelez comme ceci dans votre HTML:

<div id="navbar2"

div#navbar2 ul { }

Maintenant, vous devez régler votre UL

il vous suffit de régler votre navbar2 selon vos préférences.
margin: 0%;
valeur des marges (0% à préciser si vous désirez que la bordure ne finisse pas... voir l'exemple)
padding: 0%;
remplissage du bloc
font-family: Arial, Helvetica, sans-serif;
La police de caractère à forcer.
font-size: small;
la taille de la police

color: #00000;
La couleur de la police

line-height: 30px; la hauteur de la ligne
white-space: nowrap;
permet que les liens restent sur la même ligne.

Très important!

Une fois cela fait, cela devrait donner ça:
div#navbar2 ul { margin: 0%; padding: 0%; font-family: Arial, Helvetica, sans-serif; font-size: small; color: #00000; line-height: 30px; white-space: nowrap; }

Partie 3: Régler votre LI selon div#

list-style-type: none;
Permet d'enlever le style "list" habituel du html (toujours uniquement lorsque vous appelez navbar2!)

display: inline;
L'élément sera montré comme élément intégré, sans la ligne qui coupe avant ou après l'élément

ça donne ceci:

div#navbar2 li { list-style-type: none; display: inline; }

Partie 4: LI quand il contient un lien (a) toujours selon div#

div#navbar2 li a { }
text-decoration: none;
Pas de soulignement, pas de barures, bref, rien pour les liens! Mais vous pouvez modifier cette option comme cela vous chante (comme tout le reste d'ailleurs)
padding: 7px 10px;
Il faut parfois se répéter un peu...
color: #00000;
La couleur du lien.
À retenir! tout ceci ne s'applique QUE dans LI quand il y a un lien quand navbar2 est appelé, donc ceci ne changera rien à votre page si vous n'appelez pas navbar2 et que vous ne faites pas de lien. C'est un avantage.

ce qui donne ceci:
div#navbar2 li a { text-decoration: none; padding: 7px 10px; color: #00000; }

Partie 5: Le surlignement quand la souris passe dessus

Tout d'abord, il faut appeler navbar2 lors du passage de la souris, c'est à dire hover, que lorsqu'il est appliqué LI quand vous appelez navbar2.

div#navbar2 li a:hover { }

Les options à mettre

Vous pouvez changer la couleur du texte...
color: #FFFFFF;
Vous pouvez changer la couleur du fond de la cellue
background-color: #808080;
Mais vous pouvez aussi appliquez des modifications comme le soulignement, etc...

text-decoration: none, underline, overline, line-through, au choix;

Mais aussi, pour être original, l'espacement des lettres de votre texte du lien: (ça fait effet loupe)
letter-spacing: 5pt;
Attention, il y aura un effet de glissement. Ceci ne fonctionne que sous IE.
en fait, vous pouvez faire n'importe quel effet avec ceci.

Partie 6: d'autres petites choses à ajouter? par hasard?

div#navbar2 li a:link { color: #00000; }
Lien lorsque il est normal (ici il est à la même couleur que la normale)
div#navbar2 li a:visited { color: #00000; }
Lien lorsqu'il a été visité (ici il est à la même couleur que la normale)

div#navbar2 li a:active{ color: #000000; }
Lien lorsqu'il est en train d'être cliqué (toujours pareil entre parenthèse)

... à vous d'être un peu créatifs ^^ ;)

Partie 7: Le code COMPLET

Voici le code complet une fois terminé:
div#navbar2 { height: 30px; width: 100%; border-top: solid #000 1px; border-bottom: solid #000 1px; } div#navbar2 ul { margin: 0%; padding: 0%; font-family: Arial, Helvetica, sans-serif; font-size: small; color: #00000; line-height: 30px; white-space: nowrap; } div#navbar2 li { list-style-type: none; display: inline; } div#navbar2 li a { text-decoration: none; padding: 7px 10px; color: #00000; } div#navbar2 li a:link { color: #00000: } div#navbar2 li a:visited { color: #00000; } div#navbar2 li a:hover { color: #FFFFFF; background-color: #808080; }


Voir l'exemple

Plus d'informations sur :

• Site Exemple
• Site de l'auteur