Menuactif ~ exemple 2

Voici le code employé dans l'exemple 2. 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 2 ----------*/

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

#page-header ul.navlinks {
margin: 0px;
padding: 0px;
width: 100%;
background: #fff url(http://i40.servimg.com/u/f40/09/00/00/46/bgmenu10.png) left top repeat-x;
height: 24px;
text-align: center;
border: none; }

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

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

#page-header ul.linklist li a:hover {
background: #fff url(http://i40.servimg.com/u/f40/09/00/00/46/bgmenu10.png) left bottom repeat-x;
color: #eee; }

/*---------- fin menuactif 2 ----------*/

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: #fff url(http://i40.servimg.com/u/f40/09/00/00/46/bgmenu10.png) left top repeat-x;
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" ici sert à définir quant à elle l'image de fond de votre barre de navigation ! Remplacez "http://i40.servimg.com/u/f40/09/00/00/46/bgmenu10.png" par l'image que vous aurez créée. Je vous explique plus bas comment la créer.
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: 80px;
height: 24px;
float: left;
padding: 0px;
margin: 0px;
list-style-type: none;
font-size: 11px;
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: 80px;
height: 24px;
text-decoration: none;
margin: 0px;
padding: 0px;
font-weight: bold;
color: #fff; }

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 80 en largeur et 24 en hauteur)
"text-decoration: none;" supprime un éventuel soulignement des liens.
"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 #fff, c'est la couleur du texte de votre bouton ! choisissez avec soin.

Code:

#page-header ul.linklist li a:hover {
background: #fff url(http://i40.servimg.com/u/f40/09/00/00/46/bgmenu10.png) left bottom repeat-x;
color: #eee; }

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 utilisant une image, "background" est l'image différente que doit prendre votre bouton quand vous passez la souris dessus, et sur ce point vient l'astuce de ce menu : en fait on utilise ici qu'UNE seule et même image, seulement son positionnement change. En fait l'image fait 1 pixel de large sur 48 pixels de haut.

Le menu faisant 24 de haut, une seule partie de l'image appararaît à l'écran. C'est quand on va passer la souris sur le bouton qu'elle va changer de position, et ainsi donner l'effet désiré. Compris ?
Donc, on lui attribue dans a:hover la position left bottom qui va faire que l'image sera affichée en prenant pour point de départ le BAS d'elle-même, et comme le menu fait 24 pixel, seuls ces 24 derniers pixels seront alors visibles. On aura donc l'effet escompté.
Pour finir, "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.