Partage

Menu horizontal déroulant

JQuery : hover()

Sujet résolu

28 août 2009 à 19:23:27

Bonjour, je suis débutant en JS et je viens de découvrir l'exceptionnelle JQuery !

A l'aide d'un tuto sur le net j'ai réalisé un menu horizontal qui se déroule au passage de la souris grâce à slideUp et slideDown.
Mais j'aimerai que le menu se referme quand la souris n'est plus sur l'élément <ul>.

Mon menu :

<div id="menuPrincipal">
    <ul class="menu">
        <li class="boutonSousMenu"><span>Accueil</span>
            <ul class="sousMenu">
                <li><a href="#">Qui sommes-nous ?</a></li>
                <li><a href="#">Tarifs/Horaires</a></li>
                <li><a href="#">Rénovation CD/DVD</a></li>
            </ul>
        </li>
    </ul>
    <ul class="menu">  
        <li class="boutonSousMenu"><span>Nos films</span>
            <ul class="sousMenu"> 
                <li><a href="#">Prochainement</a></li>
                <li><a href="#">Nouveautés</a></li>
                <li><a href="#">Etc...</a></li>
            </ul>
        </li>
    </ul>
    <ul class="menu">
        <li class="boutonSousMenu"><span>Galerie Photos</span>
            <ul class="sousMenu"> 
                <li><a href="#">L'équipe</a></li>
                <li><a href="#">Magasins</a></li>
            </ul>
        </li>
    </ul>
    <ul class="menu">
        <li class="boutonSousMenu"><span>A propos</span>
            <ul class="sousMenu"> 
                <li><a href="#">Contact</a></li>
                <li><a href="#">Livre d'or</a></li>
            </ul>
        </li>
    </ul>
</div>

Un bout de code JS commenté :

$(document).ready( function () { 
    //Ici : du code portant sur la mise en forme du menu
    //...

    // Modif de l'évènement hover sur les liens
    // qui portent la classe "boutonSousMenu"
    $(".menu li.boutonSousMenu > a").hover(function (over) { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next("ul.sousMenu:visible").length == 0) { 
            // On ferme le menu qui était déjà ouvert
            $(".menu ul.sousMenu").slideUp("fast", function () { $(this).parent().removeClass("open") });
	    // Et on en ouvre un nouveau
            $(this).next("ul.sousMenu").slideDown("normal", function () { $(this).parent().addClass("open") }); 
        }
    });

    // Dans la doc jquery, il est écrit :
    // le paramètre "over" signifie que la souris est sur
    // l'élément tandis que out indique la sortie de la souris,
    // j'ai donc RAJOUTER ce qui suit mais le menu se referme illico ! 

    $(".menu li.boutonSousMenu > a").hover(function (out) { 
            $(".menu ul.sousMenu").slideUp("fast", function () { $(this).parent().removeClass("open") }); 
    });	
 
} ) ;

Voila, merci

PS : la classe "open" que je rajoute et que j'enlève au cours du script n'a rien avoir la dedans...

EDIT : Je voudrai également savoir si il est possible de "combiner" des effets de JQuery, par exemple un slideDown et un fadeIn pour que le menu descende en fondu. J'ai mis les fonctions à la suite dans le code, mais ça me fais les effets l'un après l'autre :-°

Lost17

29 août 2009 à 23:00:27

up !

cerium50

30 août 2009 à 16:53:16

Citation

Bonjour, je suis débutant en JS et je viens de découvrir l'exceptionnelle JQuery !

Arf.

Pour ce qui est de hover elle s'utilise théoriquement avec deux paramètres : http://docs.jquery.com/Events/hover donc essaye :

$(function() {
	$(".menu li.boutonSousMenu > a").hover(function () {
        if ($(this).next("ul.sousMenu:visible").length === 0) {
            $(".menu ul.sousMenu").slideUp("fast", function () {
				$(this).parent().removeClass("open");
			});
			
            $(this).next("ul.sousMenu").slideDown("normal", function () {
				$(this).parent().addClass("open");
			}); 
        }
    }, function() {
		$(".menu ul.sousMenu").slideUp("fast", function () {
			$(this).parent().removeClass("open");
		}); 
	});
});

Les ";" c'est pas fait pour faire joli, il faut les utiliser à chaque instructions.

Citation

EDIT : Je voudrai également savoir si il est possible de "combiner" des effets de JQuery, par exemple un slideDown et un fadeIn pour que le menu descende en fondu. J'ai mis les fonctions à la suite dans le code, mais ça me fais les effets l'un après l'autre

.animate( params, [duration], [easing], [callback] )

Lost17

31 août 2009 à 12:38:43

Citation

Les ";" c'est pas fait pour faire joli, il faut les utiliser à chaque instructions.

Ok, ok mais j'aimerai dire pour ma défense que c'est l'auteur du tuto qui fait pas les choses bien

et aussi :

Citation : Wikipédia

JavaScript est plus souple, permettant à une fin de ligne de marquer implicitement la fin d'une instruction. Le but est de faciliter l'usage du langage aux personnes inexpérimentées en programmation informatique...

Ah mais j'ai oublier ça :

Citation : Wikipédia

...mais cette souplesse introduit des effets inattendus.

Bon ben je mettrai des ";" à chaque fin d'instructions maintenant

Et merci pour l'indentation au passage

Pour ce qui est du menu c'est parfait !

Par contre j'ai essayer d'utiliser animate() mais j'y arrive pas, je suis même allez voir dans la doc les exemples mais ça ne correspond pas vraiment... puisque apparemment les "params" correspond a du CSS

cerium50

31 août 2009 à 16:43:24

Pour les ";" je suis catégorique c'est d'une stupidité folle d'avoir autorisé leur absence

Pour animate, c'est simple, par exemple :

$('ton selecteur ici').animate({
	width: '42px',
	height: '23px'
}, 'slow'); //va animer lentement la transition des propriétés CSS spécifiées dans le premier argument

Le truc c'est que tu débutes en JS donc tu ne connais pas les objets ><

Lost17

31 août 2009 à 18:07:09

Oui, oui, ça je l'ai parfaitement compris mais si je veux faire un fadeIn() et un slideDown en même temps. Je fais comment ?

EDIT : En fait je me suis trompé mon menu ne convient pas car des qu'on sort du lien le menu remonte, normal me diras-tu ?

cerium50

31 août 2009 à 18:10:16

Bah tu animes height et opacity ça semble évident -_-' (mais je suis pas convaincu que le résultat soit top)

Lost17

31 août 2009 à 18:12:25

Oui j'y avais pensé mais je croyais qu'on pouvait associer des fonction, tanpis je me contenterai de ça (ou pas).

Et pour ma seconde question ?

Je remets la question ici en précisant :

En fait je me suis trompé mon menu ne convient pas car des qu'on sort du lien le menu remonte, normal me diras-tu ?

Mais le visiteur n'a pas le temps de cliquer sur ce qui se déroule il faudrait donc que la fonction slideUp s'éxécute seulement si la souris est en dehors du <a> ET du <ul>, comment procéder ? Merci

Le lien c'est en fait le <span> que je transforme en lien JS...
Et le <ul> c'est celui qui a la classe "sousMenu"

Voilou !

cerium50

31 août 2009 à 18:23:51

te contenter d'animate ? c'est la méthode la plus puissante jQuery à mon avis (bye bye slideUp, fadeIn, et cie).

Sinon tu peux essayez ça :

$(function() {
	$('.menu').hover(function() {
		$(this).children('.sousMenu').slideDown();
	}, function() {		
		$(this).children('.sousMenu').slideUp();
	});
});

Mais bon je suis pas sûr.

Lost17

31 août 2009 à 18:49:54

Arf ! J'avais oublié ! Hier j'ai modifié la structure de mon menu, le voici.

<div id="menuPrincipal">
    <div class="boutonSousMenu">
        <a href="#">Accueil</a>
        <ul class="sousMenu">
            <li><a href="#">Qui sommes-nous ?</a></li>
            <li><a href="#">Tarifs/Horaires</a></li>
            <li><a href="#">Rénovation CD/DVD</a></li>
      	</ul>
    </div>
    <div class="boutonSousMenu">
        <a href="#">Nos films</a>
        <ul class="sousMenu">
            <li><a href="#">Prochainement</a></li>
            <li><a href="#">Nouveautés</a></li>
            <li><a href="#">Etc...</a></li>
      	</ul>
    </div>
    <div class="boutonSousMenu">
        <a href="#">Galerie Photos</a>
        <ul class="sousMenu">
            <li><a href="#">L'équipe</a></li>
            <li><a href="#">Magasins</a></li>
      	</ul>
    </div>
    <div class="boutonSousMenu">
        <a href="#">A propos</a>
        <ul class="sousMenu">
            <li><a href="#">Contact</a></li>
            <li><a href="#">Livre d'or</a></li>
      	</ul>
    </div>
</div>

J'ai essayé ça directement sur le <div> possédant la classe "boutonSousMenu" :

$(function() {
	$('.boutonSousMenu').hover(function() {
		$(this).children('.sousMenu').slideDown();
	}, function() {		
		$(this).children('.sousMenu').slideUp();
	});
});

Ca ne marche pas et je pense que ça aurait été la même chose avec l'ancien menu...

Une autre idée ?

PS : Ok, je prend note pour animate()

cerium50

31 août 2009 à 19:10:14

Poste le CSS... Question, ça sert à quoi de mettre des liens qui pointent nulle part ?

Lost17

31 août 2009 à 19:26:07

Je précise que le CSS (tout comme le contenu du menu) n'est la que pour la mise forme pour le moment, car le menu est très moche

Des liens qui pointent nulle part ? En fait je suis en train de totalement refaire mon site donc je n'ai pas encore mis les lien, je travaille en interne, ce n'est que le début

body
{
	padding: 0;
	margin: 0;
	width: 100%;
}
#menuPrincipal
{
	width: 100%;
}
#menuPrincipal li
{
	list-style: none;
}
.boutonSousMenu
{
	float: left;
	margin: 0; 
	padding: 0;
	text-align: center;
	background: #000; 
	color: #fff; 
	width: 200px; 
	font: 1.2em "Trebuchet MS", sans-serif; 
}
.boutonSousMenu a
{ 
	display: block; 
	padding: 4px 10px; 
	color: #fff; 
	background: #000 url(menu-item.png) left bottom no-repeat; 
} 
.boutonSousMenu a
{ 
	background-image: url(menu-item-deroule.png); 
} 
.boutonSousMenu .open a
{ 
	background-image: url(menu-item-enroule.png); 
} 
.boutonSousMenu a:hover, .boutonSousMenu a:focus, .boutonSousMenu a:active
{ 
	text-decoration: underline; 
} 
.boutonSousMenu .sousMenu
{ 
	position: absolute;
	width: inherit;
	font-size: 0.8em; 
	background: #ccc url(sousMenu.png) 0 0 repeat-x; 
	font-size: 0.9em; 
	margin: 0; 
	padding: 0; 
	border-bottom: 1px solid #666; 
} 
.boutonSousMenu .sousMenu a
{ 
	background: none; 
	padding: 3px 20px; 
}

cerium50

31 août 2009 à 20:02:24

<!doctype html>
	<html>
	<body>
	<div id="menuPrincipal">
    <div class="boutonSousMenu">
        <a href="#">Accueil</a>
        <ul class="sousMenu">
            <li><a href="#">Qui sommes-nous ?</a></li>
            <li><a href="#">Tarifs/Horaires</a></li>
            <li><a href="#">Rénovation CD/DVD</a></li>
      	</ul>
    </div>
    <div class="boutonSousMenu">
        <a href="#">Nos films</a>
        <ul class="sousMenu">
            <li><a href="#">Prochainement</a></li>
            <li><a href="#">Nouveautés</a></li>
            <li><a href="#">Etc...</a></li>
      	</ul>
    </div>
    <div class="boutonSousMenu">
        <a href="#">Galerie Photos</a>
        <ul class="sousMenu">
            <li><a href="#">L'équipe</a></li>
            <li><a href="#">Magasins</a></li>
      	</ul>
    </div>
    <div class="boutonSousMenu">
        <a href="#">A propos</a>
        <ul class="sousMenu">
            <li><a href="#">Contact</a></li>
            <li><a href="#">Livre d'or</a></li>
      	</ul>
    </div>
	</div>
	
	<style type="text/css">
	body
{
	padding: 0;
	margin: 0;
	width: 100%;
}
#menuPrincipal
{
	width: 100%;
}
#menuPrincipal li
{
	list-style: none;
}
.boutonSousMenu
{
	float: left;
	margin: 0; 
	padding: 0;
	text-align: center;
	background: #000; 
	color: #fff; 
	width: 200px; 
	font: 1.2em "Trebuchet MS", sans-serif; 
}
.boutonSousMenu a
{ 
	display: block; 
	padding: 4px 10px; 
	color: #fff; 
	background: #000 url(menu-item.png) left bottom no-repeat; 
} 
.boutonSousMenu a
{ 
	background-image: url(menu-item-deroule.png); 
} 
.boutonSousMenu .open a
{ 
	background-image: url(menu-item-enroule.png); 
} 
.boutonSousMenu a:hover, .boutonSousMenu a:focus, .boutonSousMenu a:active
{ 
	text-decoration: underline; 
} 
.boutonSousMenu .sousMenu
{ 
	position: absolute;
	width: inherit;
	font-size: 0.8em; 
	background: #ccc url(sousMenu.png) 0 0 repeat-x; 
	font-size: 0.9em; 
	margin: 0; 
	padding: 0; 
	border-bottom: 1px solid #666; 
} 
.boutonSousMenu .sousMenu a
{ 
	background: none; 
	padding: 3px 20px; 
}

	</style>
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
		
		<script type="text/javascript">
			$(function () {
				$('.sousMenu').hide();
				
				$('.boutonSousMenu').hover(function() {
					$(this).children('.sousMenu').stop().slideDown('fast');
				}, function() {				
					$(this).children('.sousMenu').stop().slideUp('fast');
				});
				
			});
		</script>

	</body>
</html>

C'est crade mais ça marche tu n'as plus qu'à nettoyer en mettant dans des fichiers séparés.

Oui il y a un décalage sous IE, mais c'est du CSS donc c'est pas ma faute, et ça n'est plus du recours du JS...

Lost17

31 août 2009 à 20:35:32

Merci, c'est super, je vais rajouter la classe "open" via JS.
Pour IE, c'est déjà bon, je ne t'avais pas posté le code CSS "spécial IE"

En tout cas merci pour tout

EDIT :
Arf ! >_<

Bizarrement, il y a des bugs qui sortent de je ne sais où o_O, regarde la vidéo que je viens de faire...

http://www.video-65.com/bug.avi (1,88 Mo)

EDIT 2 : C'est bon, ça venait de stop(), je l'ai supprimé ! A quoi servait-il ?

cerium50

31 août 2009 à 21:20:12

C'est tout sauf un bug, stop() arrête les animations en cours il ne devrait pas produire de bug. Sans stop(), si tu fais beaucoup d'aller retour les animations vont continuer alors que tu ne sera plus sur le menu depuis longtemps.

Lost17

31 août 2009 à 21:26:18

Ben oui mais t'as vu la vidéo ? C'est horrible, le menu ne se déroule plus par endroit ? o_O

cerium50

31 août 2009 à 21:50:02

A priori c'est un bug "connu" de jQuery donc enlève le stop()

Lost17

31 août 2009 à 22:52:48

Lost17

19 septembre 2009 à 15:01:41

Bonjour, je reviens sur le probleme car j'aimerai qu'il y ait une scrollbar en 800x600 et non que les boutons de menu se positionne en dessous comme sur le screen :
Image utilisateur

Une idée de comment procéder ?

cerium50

20 septembre 2009 à 17:57:58

C'est pas du JS mais du CSS... Ça doit se situer du coté de overflow...

Lost17

20 septembre 2009 à 22:03:10

Je sais bien que c'est du CSS

Je pensais ne pas avoir a creer de topic, tanpis je vais sur le forum CSS