Question

每当用户将鼠标悬停在汉堡菜单上时，我都会尝试显示列表项菜单。到目前为止，它按预期工作，当我将鼠标悬停在图标上时，列表项会出现。

但是没有动画附加在他们身上，他们只是出现在无处。我想添加折叠动画，但我不知道该怎么做。

与Paperfold JS类似的东西，我尝试使用但不成功，可能因为它已过时（2岁）？所以我又回到了手动操作。

我的目标效果的另一个例子是这个网站http://lempens-design.com

当我将鼠标悬停在菜单图标的div上并尝试将光标移动到下面的列表项时，还会出现另一个小“错误”，它们会消失。我必须多次将鼠标悬停在菜单图标上才能使列表项保持活动并处于焦点。

DEMO https://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();
});

在一个接一个地悬停时折叠列表项的效果

1 个答案: