Un effet de style différent pour chaque lien du menu Bouton_activeUn effet de style différent pour chaque lien du menu Bouton_hoverUn effet de style différent pour chaque lien du menu Fb-hoverUn effet de style différent pour chaque lien du menu Fb-active
C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets

Partagez
 

Un effet de style différent pour chaque lien du menu

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur
Kiwi
{ Membre }
{ Membre }

Féminin Messages : 142



Un effet de style différent pour chaque lien du menu Empty
Un effet de style différent pour chaque lien du menu

Niveau: Intermédiaire | Par: Kiwi | Validé par: Haribot' ♪ | En date du: 08/02/2011

Bonjour à tous ^^

Je vais entrer directement dans le vif du sujet ! Si on prend par exemple le menu Gameblog :
Un effet de style différent pour chaque lien du menu Tutomenugameblog

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 Very Happy

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://illiweb.com/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 Smile

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 ! Very Happy

Kiwi
MessageSujet: Un effet de style différent pour chaque lien du menu   Un effet de style différent pour chaque lien du menu EmptyDim 06 Fév 2011, 15:18
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.i-love-harvard.com/
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



Un effet de style différent pour chaque lien du menu Empty
FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml


Le forum n'est désormais plus géré par le staff, laissé seulement ouvert pour que les ressources et l'entraide restent accessibles. Vous pouvez néanmoins m'envoyer un MP pour supprimer un message, signaler un plagiat ou autre, je m'en occuperai à ma prochaine connexion.
Un effet de style différent pour chaque lien du menu Signature_staff
MessageSujet: Re: Un effet de style différent pour chaque lien du menu   Un effet de style différent pour chaque lien du menu EmptyLun 05 Déc 2011, 17:46
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://gharendar.forums-actifs.com
Seriwyth
{ Membre }
{ Membre }

Féminin Messages : 31



Un effet de style différent pour chaque lien du menu Empty
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 Razz) mais au moins, ça m'a permis de découvrir pleins de choses intéressantes sur ma barre préférée!!
Merci =)
MessageSujet: Re: Un effet de style différent pour chaque lien du menu   Un effet de style différent pour chaque lien du menu EmptyMar 22 Mai 2012, 18:01
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://neonblush.forumactif.org/
Opium
{ Membre }
{ Membre }

Féminin Messages : 131



Un effet de style différent pour chaque lien du menu Empty
Super tuto qui m'a permis de supprimer des liens dont je ne voulais pas dans ma barre ! :3
MessageSujet: Re: Un effet de style différent pour chaque lien du menu   Un effet de style différent pour chaque lien du menu EmptyDim 09 Déc 2012, 11:31
Revenir en haut Aller en bas
Contenu sponsorisé




Un effet de style différent pour chaque lien du menu Empty
MessageSujet: Re: Un effet de style différent pour chaque lien du menu   Un effet de style différent pour chaque lien du menu Empty
Revenir en haut Aller en bas
 

Un effet de style différent pour chaque lien du menu

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Le Header-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit