Jqueryで絶対メニューからコンテンツをプッシュ

Question

こんにちは、私は3つのレベルでメニューを作る必要があります。

最初のレベルのサブメニューが1レベルのインラインブロックの下に表示されています。私は後でそれを反応させるためにフレックスを使います。

次に、第3レベルと同じになります。私はほとんどいいよだから今

enter image description here

しかし、私は私のメニューが盗聴される理由を考え出したことができます。

これは、見えるようになっている方法です。

あなたはここにjsfiddleを見つけることができます。

https://jsfiddle.net/z1cepma4/

私はこの問題を解決することができますどのように任意のアイデアを？

あなたの助けを事前に感謝

---

 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

はトグルとアニメーションを組み合わせて使用​​します。

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

}) 

デモ： https://jsfiddle.net/rw6L4nqq/1/