ホバー上のリスト項目の折りたたみエフェクト

Question

ユーザーがバーガーメニューの上を移動するたびにリスト項目メニューを表示しようとしています。これまでのところ期待どおりに動作しています。アイコンの上にカーソルを置くと、リストアイテムが表示されます。

アニメーションはありませんが、どこにも表示されません。折りたたみアニメーションを追加したいと思いますが、どうやってそれを行うのか分かりません。

私は（2歳）それは時代遅れだかもしれないので、使用することを試みたが成功しなかったていPaperfold JSに似て何か？だから、私はそれを手動で行うことに戻りました。

私が狙ってる効果の別の例は、このウェブサイトでhttp://lempens-design.com

私はメニューアイコンのDIVの上に置いて、リスト - にカーソルを移動しようとすると、その別の小さな「バグ」もあります以下の項目は、それらは消えます。リストアイテムをアクティブにしてフォーカスを維持できるようにするには、メニューアイコンの上に何度かマウスを移動する必要があります。

DEMOhttps://jsfiddle.net/fupu02kh/1/

HTML

<header id="top-left-fixed-block"> 
    <div class="header-logo"> 
    <img src="http://placehold.it/120x120" width="120" alt="Logo" class=""> 
    </div> 
    <nav class="navigation"> 
    <div class="navButton btn-menu paperfold-toggle"> 
     <a href="#"> 
     <div class="hamburger" id="hamburger-1"> 
      <span class="line"></span> 
      <span class="line"></span> 
      <span class="line"></span> 
     </div> 
     </a> 
     <ul class="subnav" style="width: 0px; overflow: hidden"> 
     <li class="menu_about" style="height: 0px"></li> 
     <li class="menu_team" style="height: 0px"></li> 
     <li class="menu_mission" style="height: 0px"></li> 
     </ul> 
    </div> 
    </nav> 
</header> 

CSS

#top-left-fixed-block { 
    width: 177px; 
    height: auto; 
    text-align: center; 
    position: fixed; 
    z-index: 999; 
    top: 5%; 
    left: 5%; 
    -webkit-transition: all 900ms cubic-bezier(0.860, 0.000, 0.070, 1.000); 
    -moz-transition: all 900ms cubic-bezier(0.860, 0.000, 0.070, 1.000); 
    -o-transition: all 900ms cubic-bezier(0.860, 0.000, 0.070, 1.000); 
    transition: all 900ms cubic-bezier(0.860, 0.000, 0.070, 1.000); 
} 
#top-left-fixed-block .header-logo { 
    padding: 15px; 
    background-color: #191617; 
} 
#top-left-fixed-block .navButton:first-child { 
    margin-right: 1px; 
} 
#top-left-fixed-block .navButton { 
    background-color: #ed1c24; 
    width: 88px; 
    margin-top: 1px; 
    float: left; 
    transition: all 0.5s ease-out; 
} 
#top-left-fixed-block .navButton:hover { 
    background-color: white; 
    transition: all 0.5s ease-out; 
} 
#top-left-fixed-block .navButton:hover a { 
    color: #191617; 
} 
#top-left-fixed-block ul.subnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 147px; 
    position: absolute; 
    margin-top: 3px; 
    border: 0; 
    overflow: visible; 
    -webkit-perspective: 200px; 
    -moz-perspective: 200px; 
    -ms-perspective: 200px; 
    perspective: 200px; 
} 
#top-left-fixed-block .subnav > li { 
    width: 100%; 
    background-color: #191617; 
    /*-webkit-transform-origin: center top; 
    transform-origin: center top; 
    transform: rotateX(89deg);*/ 
    height: 144px; 
    overflow: hidden; 
    margin-bottom: 1px; 
    position: relative; 
    border: 0px solid white; 
} 
#top-left-fixed-block .subnav > li:first-child { 
    background-color: #704663; 
} 
#top-left-fixed-block .subnav > li:nth-child(2) { 
    background-color: #a98e62; 
} 
#top-left-fixed-block .subnav > li:nth-child(3) { 
    background-color: #3f8093; 
} 

.navButton a { 
    color: white; 
    font-size: 34px; 
    padding-top: 5px; 
} 

.hamburger .line { 
    width: 50px; 
    height: 5px; 
    background-color: #ecf0f1; 
    display: block; 
    margin: 8px auto; 
    -webkit-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
} 
#top-left-fixed-block .navButton:hover .hamburger .line { 
    background-color: #191617; 
} 
.hamburger:hover{ 
    cursor: pointer; 
} 

#hamburger-1.is-active .line:nth-child(2){ 
    opacity: 0; 
} 

#hamburger-1.is-active .line:nth-child(1){ 
    -webkit-transform: translateY(13px) rotate(45deg); 
    -ms-transform: translateY(13px) rotate(45deg); 
    -o-transform: translateY(13px) rotate(45deg); 
    transform: translateY(13px) rotate(45deg); 
} 

#hamburger-1.is-active .line:nth-child(3){ 
    -webkit-transform: translateY(-13px) rotate(-45deg); 
    -ms-transform: translateY(-13px) rotate(-45deg); 
    -o-transform: translateY(-13px) rotate(-45deg); 
    transform: translateY(-13px) rotate(-45deg); 
} 

JS

$(".hamburger").hover(function(){ 
    $(this).toggleClass("is-active"); 
}); 

$('.navButton').mouseenter(function() { 
    $('ul.subnav').css("width", "177px").css("overflow", "visible"); 
    $('ul li.menu_about').css("height", "144px"); 
    $('ul li.menu_team').css("height", "144px"); 
    $('ul li.menu_mission').css("height", "144px"); 
}); 
$('.navButton').mouseleave(function() { 
    $('ul.subnav').css("width", "0px").css("overflow", "hidden"); 
    $('ul li.menu_about').css("height", "0px"); 
    $('ul li.menu_team').css("height", "0px"); 
    $('ul li.menu_mission').css("height", "0px"); 
}); 

Answer 1

この更新されたコードを試してください。私はあなたのコードを編集しました（いくつかのCSSとJS）。

jsfiddle.net/fupu02kh/2/

$('.navButton').hover(function() { 
    $("ul.subnav").slideToggle(); 
});