[Résolu][Javascript] Un menu déroulant

[Isenduil]

Je sais que ce n'est pas ton désir de les réaliser en css mais je me permets de communiquer tout de même un lien à cet effet : CssPlay. Personnellement, j'y ai trouvé plusieurs fois mon bonheur parfois pour des menus relativement complexes (plusieurs niveaux et des effets de survols).

Il y a plusieurs liens sur la page qui pointent tous vers des réalisations différentes. Cela va de menus très simple (et parfois très moches, soyons franc) à certaines réalisations réellement complexes et élaborées (en tout cas à mon niveau de css ^^). Les codes sont libres d'utilisation ou presque (de mémoire il suffit de pointer un lien vers le site ou de laisser les commentaires du css qui précisent que le menu est inspiré du site en question).

En espérant t'avoir aidé (ou avoir dépanné quelqu'un d'autre)...

[Valter]

Oui, moi aussi j'ai été confronté à ce problème... Je n'ai pas beaucoup cherché et j'ai survolé la chose

[Harparine]

Salut T'as essayé d'affecter ton mouseover sur #menu dl au lieu de #menu dt ? Parce qu'effectivement, là ton menu descend uniquement lorsque tu es sur le titre de catégorie...

[Sephi-Chan]

Je fréquente CSS Play depuis un moment, mais dans mon cas, je tiens vraiment à la beauté conféré par les effets Javascript. Je préfère laisser à CSS la présentation et le dynamisme à Javascript.

Si j'affecte l'affichage à #menu dl au lieu de #menu dt, ça ne marche pas tout court. Le but est effectivement que le menu descende uniquement quand on survole son titre. Il doit ensuite remonter quand on ne survole plus son titre ou le contenu du sous menu.


Sephi-Chan

[Anthor]

Je pense que ça devrait correspondre à ce que tu recherches.

Code PHP :

<?php 

        $(document).ready(function(){

        

            $("#menu dd").hide();

            

            function over()

            {

                clearTimeout(this.menuTimer);

                $this = $(this).siblings("dd");

                if (!$this.is('.menuHover')) {

                    $this.addClass('menuHover');

                    $this.slideDown(300);

                }

            }

            

            function out()

            {

                $this = $(this).siblings("dd");

                this.menuTimer=setTimeout(function(){$this.removeClass('menuHover');$this.slideUp(300);},500);

            }

            

            $("#menu dt").hover(over,out).parent().find("a").each(function() {

                    var $a = $(this), $li = $a.parents("dl").find("dt");

                    $a.mouseover(function(){ $li.each(over); }).mouseout(function(){ $li.each(out); });

                })            

        }); 

[Sephi-Chan]

Merci Anthor, ta solution - proche de celle qu'avait proposé Zammentur - fonction très bien. Même si l'idée d'utiliser des timeout me déplaisait un peu de prime abord, cela semble être le meilleur moyen de gérer le problème.

Cela permet également une plus grande facilité d'utilisation : si l'utilisateur glisse en dehors du menu, il a un petit délai pour se remettre dessus, c'est un problème courant sur certains sites qui utilisent ce genre de menu.

Merci encore à tous et à Anthor en particulier, je te mettrais volontiers un +1 mais… c'est déjà fait.

J'aurais tout de même quelques questions à te poser pour le dernier bloc :

Code PHP :

<?php 

$("#menu dt").hover(over,out).parent().find("a").each(function() {

                    var $a = $(this), $li = $a.parents("dl").find("dt");

                    $a.mouseover(function(){ $li.each(over); }).mouseout(function(){ $li.each(out); });

                }) 

[Anthor]

Je relance la fonction over a chaque fois que tu repasses sur un lien contenu dans le sous menu afin de laisser le menu ouvert et reinitialisé le timeout.

Le code vu tes balises serait plus propres comme cela :

Code PHP :

<?php 

$("#menu dt").hover(over,out).parent().find("a").each(function() {

    var $a = $(this), $dt = $a.parents("dl").find("dt");

    $a.mouseover(function(){ $dt.each(over); }).mouseout(function(){ $dt.each(out); });

}) 

[Sephi-Chan]

Merci bien, je vais essayer de retravailler dessus pour mieux cerner tout ça. J'ai été étonné de voir des noms de variables débuter par un dollar.


Sephi-Chan

[Anthor]

Lol, oui une vieille habitude !

Le plus simple pour la comprendre c'est de commenter !

Code PHP :

<?php 

// Application des fonctions mouseover et mouse out sur chaque DT

$("#menu dt").hover(over,out)

// On remonte chez le parent, DL

.parent()

// On recherche chaque lien pour y appliquer les fonctions de survol

.find("a").each(function() {

// Une variable pour les liens, une pour le DT propre au lien contenu dans le DL qui est parent

    var $a = $(this), $dt = $a.parents("dl").find("dt");

// Application des fonctions sur les DT de chaque lien

    $a.mouseover(function(){ $dt.each(over); }).mouseout(function(){ $dt.each(out); });

}) 

[Sephi-Chan]

Merci Anthor pour ce commentaire. Quelque chose m'avait en effet échappé dans ton code, mais après relecture, je m'étais rendu compte de ce qui me dérangeait.

Le menu en l'état actuel (visible sur le site de Seelies) est bien mais ne se comporte pas comme je le voudrais exactement. Si on va sur un libellé de menu depuis la partie en bois après avoir déroulé un menu, le suivant s'ouvre puis se ferme aussitôt. Pour que les menus se comportent bien, il faut impérativement les utiliser sagement en allant sur un libellé par le dessous.

Je pense reprendre un menu déroulant en CSS plus traditionnel (merci Roworll de m'avoir incité à refaire un tour d'horizon de ce site ) sur lequel je grefferais une surcouche Javascript, je serais au moins sur qu'il fonctionne comme je le souhaite.


Sephi-Chan