Menu accordeon avec un script mootools

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

  • Menu accordeon avec un script mootools

    j'ouvre un nouveau post concernant le script que je développe pour réaliser un menu accordéon avec mootools et qui s'intègre au menu traditionnel de joomla sans avoir à modifier sa structure HTML ni CSS.
    L'idée de base est née de ce post débuté par Ghazal :
    http://forum.joomla.fr/showthread.php?t=89941

    Je suis parfois pointilleux et exigeant, alors je voulais un accordeon
    • qui fonctionne de 1 à n parent de niveau 0
    • qui soit le plus simple possible à implémenter (si possible tout gérer dans le script)
    • qui soit multiniveau de 0 à n niveaux


    Donc voilà le fuit de mon travail qui aboutit. Je mettrai le script très prochainement à disposition, dès que je l'aurai peaufiné pour le rendre tout joli-beau

    Edit : fichier ajouté

    Rev 1 : ajout de la fonction de récupération de la hauteur des éléments
    Rev 2 : ajout compatibilité IE, modification des liens parent neutres (ajout de javascript:void(0); ), amélioration de la compatibilité des divers templates
    Rev 3 : modification du coeur : effet appliqué sur le UL enfant, ajout compatibilité IE6, amélioration compatibilité templates
    Fichiers joints
    Dernière édition par ced1870 à 02/09/2009, 21h20
    Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
    http://www.template-creator.com Outil de création de templates
    Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

  • #2
    hey,
    keep going, good stuff.
    “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

    Commentaire


    • #3
      Thx

      Concernant le code, je ne vais pas tout expliquer mais allons à l'essentiel.
      Configuration du menu dans joomla! :
      • Rien à faire à part mettre "toujours afficher les sous-menus : oui"
      • et mettre le type de menu à "style : liste"


      Il faut bien sûr intégrer le code au template
      avec
      Code PHP:
      <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/acc_ck.js"></script>
      à caser juste avant la balise </head>
      et placer le script dans un répertoire "js" qui doit être dans le template

      Le script lui va s'occuper de
      • supprimer les liens contenus dans les parents pour éviter la redirection
      • ajouter les effets désirés pour dérouler le bidule au clic de la souris


      Options du script pour les effets mootools
      j'ai intégré les lignes à la fin du script :
      Code PHP:
      window.addEvent('domready', function() {new test1($$("li.parent a"),{
                                 
      //mooTransition : 'Quad',
                                 //mooTransition : 'Cubic',
                                 //mooTransition : 'Quart',
                                 //mooTransition : 'Quint',
                                 //mooTransition : 'Pow',
                                 //mooTransition : 'Expo',
                                 //mooTransition : 'Circ',
                                 //mooTransition : 'Sine',
                                 //mooTransition : 'Back',
                                 
      mooTransition 'Bounce',
                                 
      //mooTransition : 'Elastic',

                                 
      mooEase 'easeIn',
                                             
      //mooEase : 'easeOut',
                                             //mooEase : 'easeInOut',
                                             
                                             
      mooDuree 700
                                             
      })
      }); 
      On retrouve les options mootools (sauf 'linear' car incompatible avec 'ease'). Il suffit de décommenter la ligne que l'on veut utiliser et commenter avec '//' la ligne qu'on ne veut pas.

      Voilà je crois que j'ai fait le tour, amusez-vous !
      Dernière info, le script est sous licence LGPL

      EDIT : je remercie ghazal pour tout ses efforts et son aide précieuse. C'est lui qui m'a appris à démarrer avec Mootools il y a un peu moins d'un an maintenant. Merci
      Dernière édition par ced1870 à 29/08/2009, 15h03
      Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
      http://www.template-creator.com Outil de création de templates
      Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

      Commentaire


      • #4
        Je viens de me souvenir que j'ai juste encore oublié un détail : récupérer automatiquement la hauteur des élément A. Pour l'instant dans le script j'ai une valeur fixe de 14px qui peut être changée à la main en fonction du template qu'on utilise.

        Dès que j'ai trouvé une soluce je mettrai à jour le script

        EDIT : réglé, 1er post mis à jour
        Dernière édition par ced1870 à 29/08/2009, 17h18
        Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
        http://www.template-creator.com Outil de création de templates
        Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

        Commentaire


        • #5
          Je suis toujours sur mon script, j'ai trouvé un bug à cause de ma solution pour désactiver les liens.
          dommage...
          en plus j'ai testé avec les templates beez et japurity et les sous menus apparaissent mais ne développent pas les autres en les poussant.

          snif snif, tout ce temps passé pour ce résultat pffff

          je continue de travailler dessus si vous avez des retours de votre coté faites moi signe !
          Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
          http://www.template-creator.com Outil de création de templates
          Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

          Commentaire


          • #6
            Rapido ... (prison break time Lol)
            j'ai testé avec les templates beez et japurity
            Chez moi, ja_purity OK, mais avec moo 1.2.
            Bugs me.
            “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

            Commentaire


            • #7
              Salut les bêtes du java script et + encore

              J'ai changé le script (avec la nouvelle version), mis toujours afficher les sous-menus sur oui (seulement dans menu produit)

              Le résultat n'est malheureusement pas convequant...

              J'utilise le template beez modifié. Faut-il modifier le *.css pour donner une hauteur au sous-menu ?

              Sortez un peu, il fait grand beau dehors !! Mais un grand merci pour le travail accomplis.

              A+ Alain
              Un peu de pub: http://www.aplomb.ch

              Commentaire


              • #8
                pfff, ça marche pas sous IE !! je cherche mais sans succès pour l'instant. J'ai désactivé les CSS et passé en Fx.Style au lieu de Fx.Styles, mais rien n'y fait. Ca marche sous FF mais pas IE.
                En plus j'ai remarqué un problème par ex avec Beez qui ajoute une position absolute à une classe 'unseen' et c'est ça qui fout le bordel. Par contre je ne vois pas où cette classe s'applique ni comment éviter ce souci !!
                Pfffff, motiv' à zero....

                EDIT : idem pour ja-purity c'est une ligne de css ja-footer li qui met en display:inline qui provoque un souci, mais ça ne s'applique meme pas sur les elements de menu ce CSS, alors pourquoi il fait bugger le truc ?!!
                Dernière édition par ced1870 à 30/08/2009, 12h03
                Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                http://www.template-creator.com Outil de création de templates
                Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                Commentaire


                • #9
                  Sans cesse sur le métier, remets ton ouvrage ...
                  Perso, qd je code, ca peut venir tout de suite ... ou un mois après ...

                  Mais j'ai testé ton code sur une base ja_purity, totalement remanié et recodé (php, css, html, js) pour moo1.2.
                  Pas visible, encore en dev.
                  Et je n'ai pas de souci avec ton accordéon peut-être parce que j'ai particulièrement soigné les css des ul et li.
                  C'est donc difficile pour moi de reproduire le pb.
                  Je regrette beaucoup que j!1.6 ne soit pas prêt car la version moo 1.2 a apporté plein d'améliorations à la librairie.

                  Et là, faut absolument que je termine un truc, j'ai donc pas trop le temps.
                  Sorry, sorry.

                  Et haut les coeurs, la structure de ton code est bonne, faut juste trouver le truc pour les CSS.
                  “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                  Commentaire


                  • #10
                    et tu as testé sur IE ? parce que ça c'est pire que tout, ça marche po du tout !
                    Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                    http://www.template-creator.com Outil de création de templates
                    Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                    Commentaire


                    • #11
                      J'ai finalement réglé le plus gros du problème. Je l'ai mis en Rév 2 mis à jour dans le premier post.
                      Je crois que ce coup-ci je tiens le bon bout !! Encore quelques petits bugs à régler et des histoires de css.
                      Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                      http://www.template-creator.com Outil de création de templates
                      Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                      Commentaire


                      • #12
                        j'ai un petit souci : je ne sais pas pourquoi mais sur les sous-niveaux je me retrouve avec une balise de type 'span .' au lieu de 'span'.
                        j'ai testé, aucune idée du problème et je n'arrive pas à savoir d'où ça vient. Ca serait vraiment cool d'avoir un petit coup de pouce.
                        Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                        http://www.template-creator.com Outil de création de templates
                        Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                        Commentaire


                        • #13
                          Envoyé par ced1870 Voir le message
                          j'ai testé, aucune idée du problème et je n'arrive pas à savoir d'où ça vient. Ca serait vraiment cool d'avoir un petit coup de pouce.
                          Salut Ced, je viens de remplacer le script.

                          Ce n'est toujours pas le top...

                          J'aimerais bien t'aider, mais mes connaissances en java script sout assez limitées, je viens d'apprendre qu'il faut le coller dans les balises <head> donc...

                          Je penses, une foi réglé les petits sousis d'affichage, je le publierai sur mon site.

                          Je trouvais l'idée de modifier le defaut.php du module pas mal du tout, je me demande si ça ne serrais pas plus simple !!!

                          Bon courage.
                          Un peu de pub: http://www.aplomb.ch

                          Commentaire


                          • #14
                            Envoyé par al1pb Voir le message
                            Je trouvais l'idée de modifier le defaut.php du module pas mal du tout, je me demande si ça ne serrais pas plus simple !!!
                            tu peux développer ton idée, parce que là comme ça j'ai du mal à voir le truc.
                            Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                            http://www.template-creator.com Outil de création de templates
                            Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                            Commentaire


                            • #15
                              Le soucis des hauteurs, CSS ou mauvaise interprétation du fichier JS ?

                              A gauche, le résultat avec ton script (Premier parent déplié, deuxième parent fermé)
                              A droite, le résultat sans ton script avec mon paramètrage CSS.



                              Autre soucis : Le Moomenuh se prend de grosses phases une fois ton script accordéon actif =/
                              Dernière édition par vorlox à 31/08/2009, 12h32

                              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