Pousser le contenu du menu absolu avec Jquery

Question

Salut j'ai besoin de faire un menu avec 3 niveaux.

Lorsque vous passez la souris sur le sous-menu du premier niveau, celui-ci s'affiche sous le bloc inline à 1 niveau. Je vais utiliser plus tard flex pour le rendre réactif.

Ensuite, il en sera de même avec le troisième niveau.

Voici comment il est censé ressembler à:

enter image description here

Alors maintenant, je suis presque bon, mais je peux compris pourquoi mon menu est mise sur écoute.

Vous pouvez trouver le jsFiddle ici:

https://jsfiddle.net/z1cepma4/

une idée comment je peux résoudre ce problème?

Merci d'avance pour votre aide

---

 var $level1 = $('#nav li'); 
 
\t \t var $level2 = $('#nav li ul'); 
 
\t \t var $level3 = $('#nav li ul li ul'); 
 
\t \t var $pagecontent = $('#fakecontent'); 
 
\t \t var hoverTimeout = ''; 
 
     var leaveTimeout = ''; 
 
    
 
    
 
    
 
\t \t $level1.mouseenter(function() { 
 
\t \t \t 
 
\t \t 
 
\t \t var $thislevel2 = $(this).children('ul').first(); 
 
\t \t \t 
 
\t \t \t console.log('hover level 1 val : ' + $(this).text()); 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t clearTimeout(leaveTimeout); 
 
\t   // 1. 
 
\t   hoverTimeout = setTimeout(function() { 
 
\t   // 2. Another submenu open 
 
\t   if($thislevel2.is(':visible')) { 
 
\t   console.log('level 2 visible'); 
 
\t    // if new hovered li has megamenu, hide old menu and show the new, otherwise slide everything back up 
 
\t    if($thislevel2.length) { 
 
\t    // stop any other hoverTimeouts triggered through guick back-and-forth hovering 
 
\t    clearTimeout(hoverTimeout); 
 
\t    $thislevel2.filter(':visible').stop(true, true).hide(); 
 
\t    $thislevel2.stop(true, true).show(); 
 
\t    
 
\t    console.log('level 2 - parti 1'); 
 
\t    } else { 
 
\t    $thislevel2.filter(':visible').stop(true, true).slideUp(500); 
 
\t    $pagecontent.stop(true, true).animate({ paddingTop: '0'}, 500); 
 
\t     console.log('level 2 - parti 2'); 
 
\t    } 
 
\t   } else { 
 
\t \t   
 
\t    console.log('level 2 not visible'); 
 
\t    if($thislevel2.length) { 
 
\t \t   
 
\t \t   
 
\t    // stop any other hoverTimeouts triggered through guick back-and-forth hovering 
 
\t    clearTimeout(hoverTimeout); 
 
\t    $thislevel2.stop(true, true).show(); 
 
\t    
 
\t    
 
\t    /* 16.5em is the set height of the megamenu + negative margin of nav ul */ 
 
\t    $pagecontent.stop(true, true).animate({ marginTop: '10em'}, 500); 
 
\t    } 
 
\t   } 
 
\t   }, 200); 
 
    \t }); //$level1 mouseenter 
 
\t  
 
\t  $level1.mouseleave(function() { 
 
\t  clearTimeout(hoverTimeout); 
 
\t  leaveTimeout = setTimeout(function() { 
 
\t   if($level2.is(':visible')) { 
 
\t   $level2.filter(':visible').stop(true, true).slideUp(500); 
 
\t   $pagecontent.stop(true, true).animate({ marginTop: '0'}, 500); 
 
\t   } 
 
\t  }, 200); 
 
\t  });

#fakeheader, 
 
#fakecontent{ 
 
    width:100%; 
 
    height:150px; 
 
    background:red; 
 
    position:relative 
 
    } 
 
#nav {position: relative;} 
 
#nav li { 
 
    list-style:none; 
 
    float: left; 
 
} 
 
#nav li a { 
 
    display: block; 
 
    padding: 8px 12px; 
 
    text-decoration: none; 
 
} 
 
#nav li a:hover { 
 
    color:red; 
 
\t color:#FFF; 
 
\t opacity:1; 
 
} 
 

 
/* Targeting the first level menu */ 
 
#nav { 
 
    
 
    min-width:850px; 
 
    background:#fff; 
 
    display: block; 
 
    height: 34px; 
 
    z-index: 100; 
 
    position: relative; 
 
    left: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    width:100%; 
 
} 
 
#nav > li > a { 
 
    color:#000; 
 
} 
 

 

 
/* Targeting the second level menu */ 
 
#nav li ul { 
 
    color: #333; 
 
    display: none; 
 
    position: absolute; 
 
    left: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    width:100%; 
 
} 
 
#nav li ul li { 
 
    display: inline; 
 
} 
 
#nav li ul li a { 
 
    background: #fff; 
 
    border: none; 
 
    line-height: 34px; 
 
    margin: 0; 
 
    padding: 0 8px 0 10px; 
 
} 
 
#nav li ul li a:hover { 
 
    color:red; 
 
    opacity:1; 
 
} 
 

 
#nav li ul li:hover>a{color:red;} 
 

 
/* Third level menu */ 
 
#nav li ul li ul{ 
 
    top: 0; 
 
    left: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    width:100%; 
 
} 
 
ul.child { 
 
background-color:#FFF; 
 
} 
 
/* A class of current will be added via jQuery */ 
 
#nav li.current > a { 
 
    color:red; 
 
    float:left; 
 
} 
 

 
/* 
 
#nav li:hover > ul.child { 
 
    left:0; 
 
    top:34px; 
 
    display:inline; 
 
    position:absolute; 
 
    text-align:left; 
 
} 
 
#nav li:hover > ul.grandchild { 
 
    display:block; 
 
}*/ 
 
#nav > li:hover > a{color:red;} 
 
#nav > li > a > li:hover > a{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="fakeheader">Header 
 
</div> 
 
<div id="#menu-categories"> 
 

 
<ul id="nav"> 
 
    <li> 
 
     <a href="#">Quoi manger/Ou dormir...</a> 
 
     <ul class="child"> 
 
      <li><a href="#">Associations</a> 
 
       <ul class="child"> 
 
        <li><a href="#">Associations 3</a></li> 
 
        <li><a href="#">Associations 3</a></li> 
 
        <li><a href="#">Associations 3</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Autre</a> 
 
       <ul class="child"> 
 
        <li><a href="#">Autre 3</a></li> 
 
        <li><a href="#">Autre 3</a></li> 
 
        <li><a href="#">Autre 3</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="#">Quoi faire...</a> 
 
     <ul class="child"> 
 
      <li><a href="#">Associations</a> 
 
       <ul class="child"> 
 
        <li><a href="#">Culturelle</a></li> 
 
        <li><a href="#">Culturelle</a></li> 
 
        <li><a href="#">Culturelle</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Associations</a> 
 
       <ul class="child"> 
 
        <li><a href="#">Culturelle</a></li> 
 
        <li><a href="#">Culturelle</a></li> 
 
        <li><a href="#">Culturelle</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    
 
</ul> 
 
</div> 
 
<div id="fakecontent"> 
 
Content 
 
</div>

Answer 1

Utilisez une combinaison de bascule et animer:

$('#nav').addClass('active'); 

$('#nav li').hover(function() { 
    $(this).find('> ul').toggleClass('active'); 
    var visible = $('#menu-categories').find('ul.active').length; 
    $('#menu-categories').animate({ 
    'height': visible * 35 
    }, { 
    queue: false 
    }); 
    $(this).find('> ul').slideToggle(); 

}) 

Démo: https://jsfiddle.net/rw6L4nqq/1/