IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Menu Jquery : SlideUp et SlideDown au Hover


Sujet :

jQuery

Mode arborescent

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Octobre 2012
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2012
    Messages : 5
    Par défaut Menu Jquery : SlideUp et SlideDown au Hover
    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...
    Fichiers attachés Fichiers attachés

Discussions similaires

  1. utilisation de SlideUp et SlideDown
    Par Macaroni00 dans le forum jQuery
    Réponses: 7
    Dernier message: 07/06/2011, 22h09
  2. Paramètrage menu jquery
    Par wpenet dans le forum jQuery
    Réponses: 1
    Dernier message: 27/11/2010, 21h29
  3. menu jquery accordion avec css hidden
    Par php_de_travers dans le forum Référencement
    Réponses: 2
    Dernier message: 02/12/2009, 18h29
  4. aide menu jquery
    Par nico72 dans le forum jQuery
    Réponses: 2
    Dernier message: 26/06/2009, 13h48
  5. menu vertical a plusieurs niveau, problème hover
    Par BlackSmith dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 02/06/2008, 08h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo