Menuactif ~ exemple 1

Voici le code employé dans l'exemple 1. A vous de vous en inspirer, mettez-y vos propres couleurs !

Collez ce code dans votre feuille de style personnalisée (ne désactivez pas le CSS de base du forum !)

Code:


/*------ les 4 lignes ci-dessous annulent les coins arrondis
dans l'entête du forum, vous pouvez les effacer ou pas ------*/

#wrap { padding: 0px; }
#page-body #wrapper { margin: 5px; }
#page-header span.corners-top,#page-header span.corners-bottom {
display: none; }

/*---------- début menuactif 1 ----------*/

#page-header .navbar {
clear: both;
background-color: #fff;
padding: 0px;
border: none; }

#page-header ul.navlinks {
margin: 0px;
padding: 0px;
width: 100%;
background-color: #ddd;
height: 24px;
text-align: center;
border: none; }

#page-header ul.linklist li {
display: inline;
width: 75px;
height: 24px;
float: left;
padding: 0px;
margin: 0px;
list-style-type: none;
font-size: 10px;
text-align: center; }

#page-header ul.linklist li a {
display: block;
width: 75px;
height: 24px;
text-decoration: none;
text-transform: uppercase;
margin: 0px;
padding: 0px;
font-weight: bold;
color: #aaa; }

#page-header ul.linklist li a:hover {
background-color: #ccc;
color: #999; }

/*---------- fin menuactif 1 ----------*/


Code:

#page-header .navbar {
clear: both;
background-color: #fff;
padding: 0px;
border: none; }

Dans cette première partie de code, la propriété "background-color" est là pour modifier la couleur de fond de la zone qui entoure le menu. Généralement, vous mettrez le même code couleur que celui de votre couleur intérieure du forum.

Code:

#page-header ul.navlinks {
margin: 0px;
padding: 0px;
width: 100%;
background-color: #ddd;
height: 24px;
text-align: center;
border: none; }

Dans cette seconde partie, nous rappelons l'annulation des marges extérieures et intérieures (margin et padding) et le fait que le menu doit faire 100% de la largeur du forum. C'est surtout pour que la couleur ou l'image de fond "remplisse" le fond d'un bout à l'autre, simulant une "barre" de navigation.
La propriété "background-color" ici sert à définir quant à elle la couleur de fond de votre barre de navigation.
La propriété "height" définit la hauteur en pixels de votre barre de navigation.
"border: none;" annule le trait qui était présent par défaut sous les liens de navigation.

Code:

#page-header ul.linklist li {
display: inline;
width: 75px;
height: 24px;
float: left;
padding: 0px;
margin: 0px;
list-style-type: none;
font-size: 10px;
text-align: center; }

Dans cette troisième portion de code, on trouve "li" : ce sont les éléments de la liste (ul) que constitue le menu. Ils vont jouer le rôle de "bouton", c'est pourquoi nous leur attribuons une largeur fixe (on est obligé car malheureusement IE6 leur attribut 100% de la page quand on essaie de les faire "s'autoadapter" au lien contenu). Essayer plusieurs largeurs de boutons, pour que votre barre finale soit bien intégrée au forum ; pour ça modifier la propriété "width".
"font-size" c'est la taille du texte à l'intérieur de votre menu.
Les autres propriétés sont importantes, mais vous n'aurez jamais à les modifier, d'ailleurs n'y touchez pas !

Code:

#page-header ul.linklist li a {
display: block;
width: 75px;
height: 24px;
text-decoration: none;
text-transform: uppercase;
margin: 0px;
padding: 0px;
font-weight: bold;
color: #aaa; }

Dans cette quatrième portion de code on traite le "lien" contenu dans l'élément de liste. Vulgairement, c'est le "coeur" du "bouton". Ainsi, afin de pouvoir cliquer sur un vrai bouton et non sur un lien hypertexte traditionnel, on lui attribue la propriété "display: block;" à laquelle on rappelle la taille en largeur et hauteur qu'il doit occuper. C'est facile, ce sont les valeurs que vous avez choisies (bout de code précédent ; pour moi 75 en largeur et 24 en hauteur)
"text-decoration: none;" supprime un éventuel soulignement des liens.
"text-transform: uppercase;" est la propriété qui transforme votre texte en majuscules. Supprimez la ligne si vous voulez un texte normal.
"font-weight: bold;" met votre texte en gras. Pareil, vous pouvez supprimer le gras ou mettre "font-stytle: italic;" à la place, par exemple...
"color", ici #aaa, c'est la couleur du texte de votre bouton ! choisissez avec soin.

Code:

#page-header ul.linklist li a:hover {
background-color: #ccc;
color: #999; }

Et enfin, voici le pourquoi du comment, le "a:hover", autrement dit le SURVOL de votre bouton, celui qui fait que votre menu réagit au curseur.
Ici comme c'est un menu 100% couleur, seulement 2 propriétés entrent en jeu : "background-color" est la couleur différente que doit prendre votre bouton quand vous passez la souris dessus et "color" c'est la couleur différente que doit prendre le texte pendant le même temps.
Notez que vous pouvez ne modifier qu'une seule des deux ou bien les deux : soit seul le fond change, soit seul le texte, soit les deux.

Voilà les quelques explications que je peux vous donnez ! Amusez-vous bien, et si vous souhaitez creuser les propriétés CSS, il existe de bons sites web traitant le sujet.