Menu avec onglet différencié pour la section en cours

[ikeda]

Bonjour, me revoici avec mes questions de débutant :-)

J'ai créé un menu horizontal avec 7 onglets.
Je souhaiterais que l'onglet de la section en cours soit différencié visuellement.
Voire, dans l'idéal, que cet onglet ne soit pas un lien !
Comment procéder ?

Je vois dans mon code HTML généré que l'onglet en question est dénommé <li class="item-472 current active"> au lieu de <li class="item-472">. Mais ensuite ?…

[jisse03]

Re : Menu avec onglet différencié pour la section en cours

Bonjour,

Créer une classe CSS pour gérer la colorimétrie et le look de cette classe current active
genre:

.horiznav li.active li.current {
    color:#xxxxxx;
    background:#zzzzzz;
}

en supposant que ton menu soit dans une classe .horiznav.

[ikeda]

Re : Menu avec onglet différencié pour la section en cours

Bon, il doit me manquer une info, parce que je n'y arrive pas…

De plus, je suis un peu surpris de ce code. Une liste de classe "current" qui serait à l'intérieur d'une liste de classe "active" ? Moi pas comprendre (ou pas connaître) la logique du truc.

Mon code index.php :

<div id="menutop">
<jdoc:include type="modules" name="menutop" />
</div>

Résultat html :

<ul class="menu"><li class="item-472 current active"><a href="/fromzero2/" >Rubrique 01</a></li><li class="item-473"><a href="/fromzero2/rubrique-02" >Rubrique 02</a></li><li class="item-474"><a href="/fromzero2/rubrique-03" >Rubrique 03</a></li><li class="item-475"><a href="/fromzero2/rubrique-04" >Rubrique 04</a></li><li class="item-476"><a href="/fromzero2/rubrique-05" >Rubrique 05</a></li><li class="item-477"><a href="/fromzero2/rubrique-06" >Rubrique 06</a></li><li class="item-478"><a href="/fromzero2/rubrique-07" >Rubrique 07</a></li></ul></div>

[jisse03]

Re : Menu avec onglet différencié pour la section en cours

CSS veut dire Cascading Style Sheet, donc feuilles de style en cascade.

Le cas des menus est un de ces cas où on "cascade" plusieurs styles.
Un petit tuto peut-être http://fr.html.net/tutorials/css/

[ikeda]

Re : Menu avec onglet différencié pour la section en cours

Merci, mais voilà plusieurs années que je réalise des sites en CSS.
Pas trop de soucis à ce niveau-là je pense.

Je cherche juste à styler <li class="item-472 current active"><a href="/fromzero2/" >Rubrique 01</a></li>

[jisse03]

Re : Menu avec onglet différencié pour la section en cours

si c'est toujours l'item-472 qui doit être stylé, tu peux lui créer son propre CSS. par contre, si selon l'emplacement dans le menu, ce sera current et active qui feront la différence.

[ikeda]

Re : Menu avec onglet différencié pour la section en cours

Oui, c'est bien l'onglet de la page en cours que je souhaite cibler, et non toujours le même item.

Ce qui me pose souci, par rapport à mes connaissances, c'est cette classe "item-472 current active".
Je ne sais pas comment utiliser une classe qui comporte des espaces et plusieurs termes, je ne comprends pas comment ça fonctionne.
Est-ce que ça veut dire qu'on peut cibler uniquement l'un de ses attributs ?
Parce que malgré les nombreux essais que je viens de faire, ça ne donne rien… :-/

[jisse03]

Re : Menu avec onglet différencié pour la section en cours

Par rapport au code donné, en remplaçant le .horiznav par ta classe .menu, tu devrais y arriver.

L'application en cascade des style indique l'ordre d'application des modificateurs.

D'abord ce qui concerne la classe menu. puis si current ou active, on applique les modificateurs indiqués.

Le plus délicat, suivant le template, est de trouver la classe parente la mieux appropriée. Dans ton cas, .menu semble être la bonne candidate.

[ikeda]

Re : Menu avec onglet différencié pour la section en cours

Merci.
J'ai donc tenté :

.menu li.active li.current {
color:#fff;
background:#000;
}

Ça ne donne rien… :-/

[ikeda]

Re : Menu avec onglet différencié pour la section en cours

Ouf, j'y suis arrivé !
En fait, ce n'est pas l'élément de liste qu'il fallait cibler, mais le lien :

#menutop ul.menu li.current a:link,
#menutop ul.menu li.current a:visited {
color:#fff;
background:#000;
}

Il me semblait bien qu'il manquait quelque chose… :-)

[ikeda]

Re : Menu avec onglet différencié pour la section en cours

Me reste juste une question sur ce point :
Y a t-il un moyen de désactiver le lien de la section active ?
Je peux bien sûr faire en sorte que le pointeur ne change pas d'état au survol de cet item de menu, idem avec les couleurs, donc rien n'indique que c'est un lien.
Mais si je pouvais complètement désactiver le fait de pouvoir cliquer, ça serait le top…
Une idée ?

[jisse03]

Re : Menu avec onglet différencié pour la section en cours

Ouf, j'y suis arrivé !
En fait, ce n'est pas l'élément de liste qu'il fallait cibler, mais le lien :

La bonne cible dépend aussi du template et du système de menu utilisé

[jisse03]

Re : Menu avec onglet différencié pour la section en cours

Me reste juste une question sur ce point :
Y a t-il un moyen de désactiver le lien de la section active ?
Je peux bien sûr faire en sorte que le pointeur ne change pas d'état au survol de cet item de menu, idem avec les couleurs, donc rien n'indique que c'est un lien.
Mais si je pouvais complètement désactiver le fait de pouvoir cliquer, ça serait le top…
Une idée ?

En regardant le code du système de menu, c'est aussi faisable.

[ikeda]

Re : Menu avec onglet différencié pour la section en cours

Euh… il y a une version plus explicite ? :-)

[Grand Schtroumpf]

Re : Menu avec onglet différencié pour la section en cours

Bonjour,
il faut faire une surcharge du mod_menu : copie modules/mod_menu/tmpl/default_componant.php dans templates/tontemplate/html/mod_menu/ et modifie-le là bas.

Tu peux par exemple - à l'économie - tester que $class contient 'current' pour détecter le lien de la page courante,e t dans ce cas ne pas mettre de <a...> </a> autour du lien.
Il faudra surveiller aussi le CSS parce qu'après ça peut avoir une tête bizarre....