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

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    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 ?…

  • #2
    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:
    Code HTML:
    .horiznav li.active li.current {
        color:#xxxxxx;
        background:#zzzzzz;
    }
    en supposant que ton menu soit dans une classe .horiznav.

    Pas de demande de support par MP.
    S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

    Commentaire


    • #3
      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>

      Commentaire


      • #4
        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/
        Pas de demande de support par MP.
        S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

        Commentaire


        • #5
          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>

          Commentaire


          • #6
            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.
            Pas de demande de support par MP.
            S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

            Commentaire


            • #7
              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… :-/

              Commentaire


              • #8
                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.
                Pas de demande de support par MP.
                S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

                Commentaire


                • #9
                  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… :-/

                  Commentaire


                  • #10
                    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… :-)

                    Commentaire


                    • #11
                      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 ?

                      Commentaire


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

                        Envoyé par ikeda Voir le message
                        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é
                        Pas de demande de support par MP.
                        S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

                        Commentaire


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

                          Envoyé par ikeda Voir le message
                          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.
                          Pas de demande de support par MP.
                          S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

                          Commentaire


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

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

                            Commentaire


                            • #15
                              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....
                              Schtroumpfe toi le Schtroumpf t'aidera.
                              Je ne schtroumpfe pas aux demandes de schtroumpf par MP.

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X