APparition progressive de la couleur d'un menu

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

  • [Problème] APparition progressive de la couleur d'un menu

    Bonjour,
    je cherche depuis un moment sans vraiment trouvé ce que je veux. Je suis désolé si cette question a déjà été posée mais c'est pas faute d'avoir cherché.

    Je cherche à mettre en place dans un menu un effet de remplissage progressif de la couleur du fond d'un item de menu au survol de celui-ci, un peu comme dans le menu latéral de gauche de http://www.alatak.netwww.alatak.net.
    Je me doute qu'il faut utiliser mootools pour réaliser un tel effet, mais je dois bien avouer que le js c'est pas mon truc.

    Avez vous une idée ou une piste à me donner ?

    Merci,
    Willy
    Dernière édition par bigwill à 06/07/2009, 11h40

  • #2
    Envoyé par bigwill Voir le message
    Bonjour,
    je cherche depuis un moment sans vraiment trouvé ce que je veux. Je suis désolé si cette question a déjà été posée mais c'est pas faute d'avoir cherché.

    Je cherche à mettre en place dans un menu un effet de remplissage progressif de la couleur du fond d'un item de menu au survol de celui-ci, un peu comme dans le menu latéral de gauche de http://www.alatak.netwww.alatak.net.
    Je me doute qu'il faut utiliser mootools pour réaliser un tel effet, mais je dois bien avouer que le js c'est pas mon truc.

    Avez vous une idée ou une piste à me donner ?

    Merci,
    Willy
    Comme tu l'as dit, c'est mootools ou JQuery qui permet ça!
    A part le JavaScript, je ne vois aucune autre manière de le faire.
    Développeur WEB (jeune diplomé) : actuellement à la recherche d'un emploi.

    Portfolio actuellement indisponible.

    Commentaire


    • #3
      salut,
      tu as une piste de réflexion ici :
      http://joomlack.fr.nf/index.php?opti...=76&Itemid=105
      la démo n'est malheureusement plus fonctionnelle pour l'instant. Je suis en pleine reconstruction de mon site. Mais le script est OK !
      tiré directement d'ici :
      http://demos111.mootools.net/Fx.Styles
      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
        ok merci ced,
        je vais essayer de m'en sortir avec ça. Je vais retirer le margin et juste garder la modif de background.

        Je vous donne un retour si je réussi.

        Will

        Commentaire


        • #5
          Super, j'ai réussi sans problème en suivant les liens que tu as donné Ced, notamment celui de ton site internet qui m'a permis de penser à mettre en place la première ligne dans le .js (ce qui me bloquait car je l'avais oublié )
          Merci encore !

          Commentaire


          • #6
            Bon, alors en fait j'ai pas tout à fait réglé mon problème.
            Mes "animations" en javascript via mootools fonctionnent à merveille, pas de soucis.
            J'ai quand même dû appliquer deux Fx : un au fond et un à la couleur du lien.
            voici mon code :
            Code:
            window.addEvent('domready', function(){
            	var toplist = $$('#Menu-top li');
            		toplist.each(function(element) {
            		var fx = new Fx.Styles(element, {duration:1000, wait:false});
            		element.addEvent('mouseenter', function(){
            			fx.start({
            				'background-color': '#58595d',
            			});
            		});
            		element.addEvent('mouseleave', function(){
            			fx.start({
            				'background-color': '#131618',
            			});
            		});
            	});
            	
            	var toplistlink = $$('#Menu-top li a');
            	toplistlink.each(function(elementlink) {
            		var fxlink = new Fx.Styles(elementlink, {duration:1000, wait:false});
            		elementlink.addEvent('mouseenter', function(){
            			fxlink.start({
            				'color':'#fff'
            			});
            		});
            		elementlink.addEvent('mouseleave', function(){
            			fxlink.start({	
            				'color':'#58595d'
            			});
            		});
            	});
            });
            Par contre, je change l'apparence du menu actif et lorsque je repasse au dessus de celui ci, le javascript se lance quand même ce qui en fait, compte tenu des couleurs choisies dans mon css, me fait disparaitre le lien puisque je me retrouve avec le lien et le fond de la même couleur #58595d en l'occurence.

            J'ai cherché un moyen de reconnaître le lien actif en java pour inclure une condition sur celui-ci, mais tous mes essais ont été vains. Quelqu'un pourrait il me filer un coup de main là dessus ?

            Commentaire


            • #7
              j'ai regardé ton site je ne vois pas de souci ...
              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


              • #8
                Merci de ton aide ced, mais ce que je suis en train de développer n'est pas en ligne et ce n'est pas pour mon site.
                Je creuse toujours dans cette voie : mettre une condition pour que mes fonctions fx et fxlink ne s'appliquent que si on survole un autre lien que celui actif.

                Commentaire


                • #9
                  as-tu essayé avec un truc du genre
                  Code:
                  $$('#Menu-top li.active').each(function(element) {
                  		element.addEvent('mouseenter', function(){
                  			fx.stop();
                  			});
                  });
                  ?
                  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


                  • #10
                    J'ai pas pris le temps d'essayer ta solution ced, mais il va falloir que je le fasses.

                    Là, j'ai un truc étrange qui se produit : mon "animation" en javascript ne fonctionne pas sur les page sou il y a un autre script javascript comme sur ma page contact faite avec un formulaire (artforms) ou sur la page galerie qui contient un wrapper vers imagevue (une galerie en flash).
                    Pourtant, dans le code de la page tout semble ok ... Je comprends pas trop

                    Commentaire


                    • #11
                      probablement un problème de compatibilité mootools-jquery ! j'avais déjà ce souci avec le forum fireboard. Va voir sur le forum d'artform, peut etre proposent-ils une solution
                      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
                        ouep, ça doit être de l'incompatibilité ... Le truc c'est que Artforms ne dispose pas de forum, enfin en tous cas pas un que j'ai réussi à trouver

                        Commentaire


                        • #13
                          ben alors il te reste 3 solutions :
                          1/ laisser tomber artforms
                          2/ laisser tomber ton script mootools sur la page artforms
                          3/ te pencher sur la méthode de compatibilité jquery-mootools et modifier le composant artforms en conséquence... bon courage !!
                          un lien pour t'aider : http://www.lafermeduweb.net/billet/r...otype-133.html
                          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


                          • #14
                            Ouai, j'ai déjà pensé au 1 sachant que le 2 est hors e question.

                            Par contre, le lien que tu me donnes est intéressant... mais je suis pas sûr de la manip à suivre :
                            je colle le code quivant dans mon index.php et ça suffit ?
                            Code:
                            <script type="text/javascript" src="/js/mootools-core.js"></script">
                            <script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script"> 
                            <script type="text/javascript">
                             // Javascript jQuery
                             var J = jQuery.noConflict(); 
                             J(document).ready(function(){
                              J('#jquery').css('display', 'block'); 
                             });
                             
                             // Javascript Mootools   
                             window.addEvent('domready', function(){
                              $('mootools').setStyle('display', 'block'); 
                             });
                            </script>
                            
                            En tout cas je vais essayer, merci !

                            Commentaire


                            • #15
                              ah la je ne suis pas sur de pouvoir t'aider. Faut faire des tests, moi le souci que j'avais eu avec fireboard j'avais une soluce spécifique au composant. Je ne peux te conseiller que de faire des recherches et des tests sur le sujet. Et quand tu auras trouvé n'hésites pas à en donner la solution
                              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

                              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