Drücken Inhalt aus absoluten Menü mit Jquery

Question

Hallo ich muss ein Menü mit 3 Ebenen machen.

Wenn Sie den Mauszeiger bewegen, wird das erste Untermenü unter dem Inline-Block angezeigt. Ich werde später Flex verwenden, um es ansprechbar zu machen.

Dann wird es das gleiche mit der dritten Ebene sein.

Dies ist, wie es aussehen soll:

enter image description here

So, jetzt fast gut ich bin, aber ich dachte, können Sie heraus, warum mein Menü abgehört wird.

Sie können die jsfiddle finden Sie hier:

https://jsfiddle.net/z1cepma4/

eine Idee, wie ich dieses Problem lösen kann?

Vielen Dank im Voraus für Ihre Hilfe

---

 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

verwenden eine Kombination von Knebel und animieren:

$('#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(); 

}) 

Demo: https://jsfiddle.net/rw6L4nqq/1/