Menu Jquery : SlideUp et SlideDown au Hover

1 pièce(s) jointe(s)

Bonjour à tous, voilà je cherche à faire une sorte de Megamenu qui fait descendre le contenue lorsque celui-ci s'affiche.
Jusque là, aucun problème, mais je n'arrive pas à manipuler ma fonction afin que celle-ci fonctionne correctement.
Le problème de mon menu est que j'appel une Div à s'afficher, je ne marche pas par le système de ul > li > ul car mon megamenu doit être centré par rapport à la page.
J'utilise donc un data- pour appeler mes Div.
Malheureusement, avec ce que j'ai fait le résultat est vraiment bizarre, et les comportement ne marches qu'une fois sur deux. Je vous laisse juger avec le fichier.

Voici ma fonction JS :

Code : JavaScript - Sélectionner

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready( function () {
$('ul.subnav').hide();
var previousul = null;
//Lorsqu'on entre dans le menu
$('li.mainli').mouseenter(function(e){
previousul = $(this);
$("ul.subnav").slideUp('slow', function () {
			$(previousul.data('divopen')).slideDown('slow');
            });                 
			e.preventDefault();
});
 
// Lorsqu'on sort du menu
$($("li.mainli") && $("ul.subnav")).mouseleave(function(e){           
$($(this).data('divopen')).slideUp();                   
});
e.preventDefault();
});

Voici le HTML : Code : HTML - Sélectionner

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<div class="center">
<div id="nav">
  <ul class="mainMenu cssonly" id="RootMenu">
      <li class="mainli" data-divopen="#subnav1">
				<a id="veri" href="#" ><img src="images/veri.png" alt=""/><br/>VERI</a>			
      </li>
 
      <li class="mainli" data-divopen="#subnav2"><a id="services" href="#"><img src="images/services.png" alt="" /><br/>
Services</a></li>
 
      <li class="mainli"><a id="applications" href="applications.html"><img src="images/applications.png" alt=""/><br/>Applications</a></li>
      <li class="mainli"><a id="wave" href="#"><img src="images/wave.png" alt=""/><br/>Wave</a></li>
    </ul>
       <ul id="subnav1" class="subnav">
           <li><a href="#">DCR</a></li>     				      
           <li><a href="#">Secrétaire général</a>
             <ul class="subsubnav">					
		 <div class="colones">
		  <li><a  href="#">Pôle</a></li>
                  <li><a  href="#">Expert</a></li>
		  <li><a  href="#">Pôle</a></li>
		  <li><a  href="#">Expert</a></li>
		  <li><a  href="#">Pôle</a></li>
                  <li><a  href="#">Expert</a></li>
	     </div>
	     <div class="colones">
		  <li><a  href="#">Pôle</a></li>
                  <li><a  href="#">Expert</a></li>
		  <li><a  href="#">Pôle</a></li>
                  <li><a  href="#">Expert</a></li>
		  <li><a  href="#">Pôle</a></li>
                  <li><a  href="#">Expert</a></li></div>
                  </ul></li>  
		  <li><a href="#">DQM</a></li>
		  <li><a href="#">DVI</a></li>
		  <li><a href="#">IRP</a></li>
	</ul>
	<ul id="subnav2" class="subnav">				 
		  <li id="webmail"><a href="#">Webmail</a></li>
		  <li id="kiosquerh"><a href="#">Kiosque RH</a></li>
		  <li id="pac"><a  href="#">PAC</a></li>
                  <li id="webcam"><a  href="#">Webcam</a></li>
                  <li id="revisionsalariale"><a href="#">Revision Salariale</a></li>
		  <li id="entretieneval"><a href="#">Entretien d'Evaluation</a></li>
                  <li id="boiteaidee"><a href="#">Boite à idée</a></li>
                  <li id="intranetgroupe"><a href="#">Intranet Groupe</a></li>
                  <li id="liensutiles"><a href="#">Liens utiles</a></li>
 
	 </ul>
	</div>
</div>

Si quelqu'un à une petite idée pour stabiliser ce menu je suis preneur.
Si vous avez des questions, n'hésitez pas.

PS:Je débute en Javascript...

Code:

$($("li.mainli") && $("ul.subnav"))

:koi:

Oui, alors cette ligne me sert à définir la zone pour le mouseout et comme le sous-menu qui s'affiche ne fait pas parti du <li> j'ai essayé de concaténer le <li> du niveau et la div du sous-menu...
Je ne pense pas non plu que ce soit la chose à faire mais en mettant seulement $("li.mainli") dès que je passe la sourie sur le sous menu celui-ci remonte car elle est en dehors du li...Le problème vient du fait que ma div n'est pas dans le <li> du premier niveau...Car je veux que le sous-menu soit centré.
Ça aurait été plus simple a un menu de type ul > li > ul > li c'est sur mais bon...
:s

Bonjour

Code:

1
2
3
4
5
6
7
8
9
$('ul.subnav').hide();
 
$( "li.mainli" ).mouseenter( function(){
	$( $( this ).data( "divopen" ) ).stop( true, true ).slideDown( "slow" );         
});
 
$( "ul.subnav").mouseleave( function(){           
	$( this ).stop( true, true ).slideUp();                   
});