Discussion :

[djedje91]

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 :

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 () {
$('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 :

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
 
<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...