Comment en cliquant 'ailleurs' faire refermer un menu

**anxious** · 05/03/2009, 12h10

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 05/03/2009, 13h47

onblur

**anxious** · 05/03/2009, 14h25

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**E.Bzz** · 05/03/2009, 14h29

Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

style="position:absolute;"

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

A+

**anxious** · 05/03/2009, 15h23

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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');
	});
});
	});

**SpaceFrog** · 05/03/2009, 15h27

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**anxious** · 05/03/2009, 17h18

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Comment en cliquant 'ailleurs' faire refermer un menu

JavaScript

Vue hybride

Discussions similaires

Partager

Partager