Comment en cliquant 'ailleurs' faire refermer un menu

Version imprimable

Bonjour, je vais essayer d'être le plus clair possible

j'ai un menu déroulant grâce à ce tutorial :
Menu déroulant animé avec jQuery

jusque la tout va bien,

1] mais j'aimerais bien faire en sorte que quand mon menu est déroulé, que lorsque l'utilisateur clique ailleurs (et pas seulement sur l'image du menu pour le faire refermer) pour X raisons (finalement il ne veux plus sélectionner un sousmenu) le menu se renroule
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <img src="images/navigate.png" width="184" height="34" class="menu_head" /> <ul class="menu_body"> <li><a href="#">Qui sommes-nous ?</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Gallerie</a></li> <li><a href="#">Contact</a></li> </ul>
Code:

1 2 3 4 5 6 7 8 $(document).ready(function () { $("ul.menu_body li:even").addClass("alt"); $('img.menu_head').click(function () { $('ul.menu_body').slideToggle('medium'); }); });
2] quelle est la propriété CSS pour éviter que lorsque quand le menu déroulant s'ouvre, il "pousse" le div du dessous décalant ainsi tout le siteweb.

Merci de votre aide ;)

05/03/2009, 13h47
SpaceFrog

onblur

ok merci, donc en gros ça va faire ça ?
Code:

1 2 3 4 5 6 7 8 9 10 $(document).ready(function () { $("ul.menu_body li:even").addClass("alt"); $('img.menu_head').click(function () { $('ul.menu_body').slideToggle('medium'); }); $('img.menu_head').onblur(function () $('ul.menu_body').slideToggle('medium'); });
mais ca ne risque pas de faire qu'a chaque fois qu'on clique ailleurs le menu va sans cesse s'ouvrir et se fermer ?

05/03/2009, 14h29
E.Bzz

Bonjour,

Citation:

Envoyé par anxious

2] quelle est la propriété CSS pour éviter que lorsque quand le menu déroulant s'ouvre, il "pousse" le div du dessous décalant ainsi tout le siteweb.

Il faut le positionner en absolute

Code:

style="position:absolute;"

puis jouer sur les "top" et "left" pour le positionner au bon endroit de la page ...

A+

merci ebzz
par contre en ce qui est du script, je n'arrive pas à mettre en œuvre la fonction que tu m'as donnée SpaceFrog, je m'excuse je débute et n'ai que de la bonne volonté pour l'instant.

onblur n'as pas l'air d'être reconnu, mais blur lui oui selon les fonctions jQuery, par contre pas moyen de le faire marcher :/
Code:

1 2 3 4 5 6 7 8 9 10 11 $(document).ready(function () { $("ul.menu_body li:even").addClass("alt"); $('img.menu_head').click(function () { $('ul.menu_body').slideToggle('medium'); $('img.menu_head').onblur(function () { $('ul.menu_body').slideToggle('medium'); }); }); });

05/03/2009, 15h27
SpaceFrog

Code:

$('img.menu_head').onblur=function () {...}

Hélas je n'y parviens toujours pas... ca doit surement être quelque chose de simple mais je dois passer a coté de quelque chose.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function () {
    $("ul.menu_body li:even").addClass("alt");
 
	$('img.menu_head').click(function () {
        $('ul.menu_body').slideToggle('medium');
 
 
	$('img.menu_head').onblur=function () {
		$('ul.menu_body').slideToggle('medium'); 
	}
 
	});
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<body>
 
<div id="banniere">
<img src="images/testlogo.png" width="980" height="150" class="logo" />
 
 
</div>
 
<div id="listes_menus"> 
 
<img src="images/navigate.png" alt="image du menu des GSP" width="184" height="34" class="menu_head" />
<ul class="menu_body">
    <li><a href="#">Qui sommes-nous ?</a></li>
    <li><a href="#">Portfolio</a></li>
 
    <li><a href="#">Clients</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Forums</a></li>
 
    <li><a href="#">Gallerie</a></li>
    <li><a href="#">Contact</a></li>
</ul>
 
 
</div>
 
<div id="contenu">
 
 
<p> blallbalblalablbalalablbblalaehapehfoeaheffpohpef </p>
 
</div>

on est bien d'accord que cela devrait refermer mon menu ouvert lorsque je clique ailleurs sur ma page (bannière, corps...). parce que rien ne se passe (enfin rien ne se ferme) :p.
merci.