Bonjour à tous ^^

Je vais entrer directement dans le vif du sujet ! Si on prend par exemple le menu Gameblog :


Il permet, avec une couleur différente des autres, de mettre en avant la rubrique boutique. De plus, des couleurs différentes en background lors du survol permettent de mettre en avant ou d'associer certaines catégories du menu. Ce serait bien de pouvoir faire de même, avec Forumactif, non? ^^ Eh bien, c'est l'objet de ce tutoriel

Etape 1 : Etudier le HTML

Savez-vous à quoi ressemblent les liens du menu du forum, du point de vue code? Voici un exemple tiré du thème par défaut de PHPBB2 :

Code:

<!-- Lien n° 1, le forum -->
<!-- Une balise a, une classe mainmenu, un href, normal. -->
<a class="mainmenu" href="/">
          <!-- A l'intérieur, par défaut, il y a une image, et... -->
          <img id="i_icon_mini_index" class="sprite-icon_mini_index" src="http://2img.net/i/fa/empty.gif" border="0" height="13" hspace="2" alt="Accueil" title="Accueil">
          <!-- ...et un texte : le voici -->
          Accueil
</a>
<!-- fin de la balise a -->

Ces liens ont tous, sans exception, cette forme type. Suite à ça, on sait qu'on va pouvoir utiliser la classe mainmenu pour gérer les liens spécifiques au menu principal (la barre de navigation) en CSS.

L'ennui, si tous les liens possèdent cette même classe, forcément, ils vont avoir le même CSS, mais, c'est justement ce qu'on cherche à éviter...

Y a-t-il autre chose dont nous puissions nous servir pour les différencier en CSS? Bien sûr, il y a le contenu (image et/ou texte), mais en CSS, il ne nous sert pas à grand chose... En revanche, il y a le href qui va changer sur chaque lien, puisqu'ils ne pointent jamais sur la même page ! Et ça, c'est très utile.

Etape 2 : Les sélecteurs d'attribut en CSS

Les sélecteurs d'attribut pourraient faire l'objet de tout un cours, tant ils offrent de nouvelles possibilités. J'invite ceux très fortement intéressé par le CSS à chercher quelques cours à ce sujet sur Internet

Ici, nous allons l'aborder brièvement, pour expliquer le principe. Pour la plupart, vous connaissez les trois sélecteurs suivants en CSS :

Code:

/*Sélecteur de type : Toutes les balise de type p auront pour propriété une police de caractère de 12*/
p {
    font-size:12px;
}


/*Sélecteur de classe : Toutes les balise de classe texte-important auront pour propriété une police en gras*/
.texte-important {
    font-weight:bold;
}


/*Sélecteur d'id : La balise d'id titre-page aura pour propriété une police en rouge*/
#texte-page {
    color:red;
}

Le sélecteur d'attribut, lui, va faire appel aux attributs HTML. Pour rappel, les attributs sont les "options" que vous avez entre le début et la fin d'une balise HTML. Les id="", les class="", les src="" et les href="" en font partie.

Voici à quoi ressemble un sélecteur d'attribut. Dans cet exemple, il fera le même effet que le sélecteur d'id un peu plus haut.

Code:

[id="texte-page"] {
    color:red;
}

Bon, remplacer les # par cette technique, c'est se compliquer la vie, mais vous voyez le principe?

Etape 3 : Récupérer le contenu du href

À présent, il nous faut connaître le contenu exact de nos href. Pour cela, il vous faut aller dans votre panneau d'administration avancé, puis dans Affichage et enfin dans En-tête et Navigation, situé sur la gauche dans la catégorie "Page d'Accueil".

Vous avez une section "Barre de navigation", dans laquelle vous pouvez gérer la disposition des liens du menu, rajouter des liens dans le menu, en enlever ou en modifier, bref, faire votre petite affaire.

Ce qui nous intéresse, c'est bien évidemment la colonne "Lien", dans laquelle vous avez ce qui servira de contenu au href. Maintenant que vous avez récupéré ces infos, il ne vous reste plus qu'à coder de vos petits doigts musclés !

Etape 4 : Application !!

Récapitulons : On sait que nous avons besoin d'utiliser la classe mainmenu, qui va limiter les effets de notre CSS au menu et qu'on va utiliser le sélecteur d'attribut pour différencier les éléments grâce aux href récupérés précédemment.

Ce qui nous donne, par exemple pour mettre en avant le lien d'enregistrement :

Code:

/*Tous les éléments de classe mainmenu dont le href est égal à /register */
.mainmenu[href="/register"] {
    color:red;
}

Et bien sûr, les survols fonctionnent également :

Code:

.mainmenu[href="/register"]:hover {
    color:green;
}

Mais, avez-vous essayé de faire fonctionner ça, sur le bouton de déconnexion? Parce que malheureusement, ça ne fonctionnera pas =/
Autant, ceci marche sur le bouton de connexion :

Code:

.mainmenu[href="/login"] {
    color:green;
}

Autant pour la déconnexion, aucun effet... Pourquoi? Tout simplement car le lien est différent, et contient des variables uniques pour reconnaître l'utilisateur. Par exemple, j'ai ceci :

Code:

<a href="/login?logout=1&sid=7ceefaca144bf9e7c2424de394ccf4520&key=96c24ba2" rel="nofollow" id="logout">

Du coup, le href n'est plus strictement égal à /login... Et chaque variable sont différentes selon les utilisateurs, la cata quoi...
Mais... Vous avez bien regardé? Il y a un petit quelque chose supplémentaire qui va vous faciliter la vie !
Un bel id "logout". On n'aurait même pas osé en rêver ;p

Code:

/*La connexion */
.mainmenu[href="/login"] {
    color:green;
}
/*La déconnexion */
#logout {
    color:black;
}

En plus, vous pourrez donner un style différent, même une image de fond différente selon s'il s'agit de connexion ou déconnexion, la classe ;p

Par contre, impossible de repérer par ce biais s'il y a un nouveau MP ou pas, c'est dommage, mais c'est comme ça ^^

Pour ceux qui pourraient vouloir en savoir plus sur les sélecteurs d'attribut, sachez qu'au lieu d'utiliser l'id, on aurait pu procéder ainsi :

Code:

/*La connexion */
.mainmenu[href="/login"] {
    color:green;
}
/*La déconnexion : tous les éléments de la classe mainmenu dont le href commence par /login?logout */
.mainmenu[href^="/login?logout"] {
    color:black;
}

Et il existe d'autres possibilités de ce genre ^^

Maintenant, si j'ai réussi à être claire, vous avez toutes les clés en main pour différencier dans le CSS les éléments du menu, et il ne reste plus qu'à jouer avec les propriétés !

Kiwi

Oh et bien... Merci pour ce super tutoriel, j'ai appris pleins de trucs sur la barre de navigation du coup!
Je pense pas m'en servir (j'aime trop savoir quand arrivent les MP pour ça ) mais au moins, ça m'a permis de découvrir pleins de choses intéressantes sur ma barre préférée!!
Merci =)

Super tuto qui m'a permis de supprimer des liens dont je ne voulais pas dans ma barre ! :3