Discussion :

[mims1664]

Bonjour, je suis en train d'effectuer un menu avec Jquery.

cela fonctionne bien pour le moment, j'affiche et je cache des divs avec la propriété display.
Ma fonction commence à être longue et j'aurais besoins de savoir s'il était possible d'effectuer une simplification de ma fonction. Voici mon code Jquery, je ne pense pas que le reste soit utilie :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
//SOUS-MENU//
 
$(document).ready(function() {
 
	   	//initialisation
		$('#subnav-labos').css('display', 'none');
		$('#subnav-promotions').css('display', 'none');
		$('#subnav-livres').css('display', 'none');
		$('#subnav-tirages').css('display', 'none');
		$('#subnav-objets').css('display', 'none');
 
 
		//////action menu over
 
		$('#nav-tirages').hover(function() {
          $('#subnav-tirages').css('display', 'block');
        });
		$('#nav-tirages').mouseout(function() {
          $('#subnav-tirages').css('display', 'none');
        });
		$('#subnav-tirages').mouseover(function() {
          $('#subnav-tirages').css('display', 'block');
        });
 
        $('#subnav-tirages').mouseout(function() {
          $('#subnav-tirages').css('display', 'none');
        });
 
 
 
 
		$('#nav-livres').hover(function() {
          $('#subnav-livres').css('display', 'block');
        });
		$('#nav-livres').mouseout(function() {
          $('#subnav-livres').css('display', 'none');
        });
		$('#subnav-livres').mouseover(function() {
          $('#subnav-livres').css('display', 'block');
        });
 
        $('#subnav-livres').mouseout(function() {
          $('#subnav-livres').css('display', 'none');
        });
 
 
 
		$('#nav-promotions').hover(function() {
          $('#subnav-promotions').css('display', 'block');
        });
		$('#nav-promotions').mouseout(function() {
          $('#subnav-promotions').css('display', 'none');
        });
		$('#subnav-promotions').mouseover(function() {
          $('#subnav-promotions').css('display', 'block');
        });
 
        $('#subnav-promotions').mouseout(function() {
          $('#subnav-promotions').css('display', 'none');
        });		
 
 
 
 
		$('#nav-labos').hover(function() {
          $('#subnav-labos').css('display', 'block');
        });
		$('#nav-labos').mouseout(function() {
          $('#subnav-labos').css('display', 'none');
        });
		$('#subnav-labos').mouseover(function() {
          $('#subnav-labos').css('display', 'block');
        });
 
        $('#subnav-labos').mouseout(function() {
          $('#subnav-labos').css('display', 'none');
        });
		$('#nav-labos').hover(function() {
          $('#subnav-labos').css('display', 'block');
        });
		$('#nav-labos').mouseout(function() {
          $('#subnav-labos').css('display', 'none');
        });
		$('#subnav-labos').mouseover(function() {
          $('#subnav-labos').css('display', 'block');
        });
 
        $('#subnav-labos').mouseout(function() {
          $('#subnav-labos').css('display', 'none');
        });	
 
 
 
 
		$('#nav-objets').hover(function() {
          $('#subnav-objets').css('display', 'block');
        });
		$('#nav-objets').mouseout(function() {
          $('#subnav-objets').css('display', 'none');
        });
		$('#subnav-objets').mouseover(function() {
          $('#subnav-objets').css('display', 'block');
        });
 
        $('#subnav-objets').mouseout(function() {
          $('#subnav-objets').css('display', 'none');
        });

[Bovino]

La force de jQuery est de pouvoir travailler sur des collections d'éléments.
Donc au lieu d'affecter un comportement à chaque élément de menu en fonction de leur id, tu ferais mieux de leur affecter une classe commune.
D'autre part, la méthode .hover() peut prendre 2 paramètres de type fonction ; le premier correspondant au mouseover, le second au mouseout.
Donc, si on considère que tes items de menu ont la classe 'menu-item', ton code peut être simplifié en

Code :

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

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
    $('menu-item').hide().hover(
        function(){
            $(this).show();
        },
        function(){
            $(this).hide();
        });
});

Tu noteras qu'après le premier hide(), l'objet jQuery renvoie la collection en cours, il est donc possible d'enchainer le traitement sur l'ensemble des éléments avec .hover().

[mims1664]

Bonjour, merci pour cette explication, par contre je ne suis pas sur que ca puisse me convenir, regardez comment j'ai travaillé , sachant que je ne suis pas a l'aise avec la css

www.developper-photo.com
mdp : dvp/dvp

dite moi ce que vous en pensez ... est ce que je peux optimiser ...

Merci de vos conseils .

Jérémie

[danielhagnoul]

Bonsoir

J'ai regardé votre page, mais je ne suis pas certain d'avoir bien compris la logique de votre système, mais voici un exemple de simplification.

Dans cet exemple lorsque l'utilisateur passe sur un id "nav-X' l'élément d'id "subnav-X" apparaît. Cet élément reste affiché jusqu'à ce que l'utilisateur entre et sorte de la zone de l'élément. Mais si vous réalisez un test, ce sera plus explicite.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
	$(function(){
		$("[id^='subnav-']").hide();
 
		$("[id^='nav-']").mouseenter(function(){
			$("#sub"+this.id).show("slow");
		});
 
		$("[id^='subnav-']").mouseleave(function() {
			$(this).hide("slow");
		});
	});
</script>

[mims1664]

Bonjour,

Super merci pour cette fonction qui me simplifie tout ! vraiment puissant ! j'ai du adapter en ajoutant 2 ligne en bas car lorsque je survole un onglet du menu cela affiche la zone dessous mais si je ne la survole pas et que je quitte de suite l'élément reste affiché

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
(document).ready(function() {

		$("[id^='subnav-']").hide();
		
		$("[id^='nav-']").mouseenter(function(){
			$("#sub"+this.id).show();
		});
		
		$("[id^='subnav-']").mouseleave(function() { 
			$(this).hide();
		});
		
		$("[id^='subnav-']").mouseover(function() { 
			$(this).show();
		});
		$("[id^='nav-']").mouseleave(function(){
			$("#sub"+this.id).hide();
		});

Encore une question est il possible depuis cette fonction de porter l'effet hover sur le bouton nav lorque l'on survole la zone subnav ?

Encore mercie pour l'aide que vous m'apportez.

[danielhagnoul]

Bonsoir

Encore une question est il possible depuis cette fonction de porter l'effet hover sur le bouton nav lorque l'on survole la zone subnav ?

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
		// la vitesse pour hide et show est réglagle :
		// "fast", "slow", un nombre en millisecondes : 2000 pour 2s
		$("[id^='nav-']").hover(
			function(){
				$("#sub"+this.id).show("slow");
			},
			function(){
				$("#sub"+this.id).hide("slow");
			}
		);
 
		// hover = mouseenter + mouseleave.
		// mouseover et mouseout sont à proscrire
		$("[id^='subnav-']").hover(
			function() {
				$(this).show("slow");
				$("#"+this.id.slice(3)).show("slow");
			},
			function() { 
				$(this).hide("slow");
				$("#"+this.id.slice(3)).hide("slow");
			}
		);

[mims1664]

Bonsoir,

Merci mais je ne comprends pas bien, ce n'est pas l'effet que j'attends !!!
ce que je voulais c'est lorsque je survole le menu tirage, il soit (le menu) pour la css en hover, et la zone subnav-tirage en visible. lorsque je quitte les 2 zones le menu tirage passe en normal et la zone subnav-tirage disparait.

Avec le code que vous me proposez j'ai un comportement bizarre ...


Jérémie