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
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins
                              Travaille ...
                              X