Question

我需要实现具有弹跳肉丸效果或水滴（根据需要命名）的汉堡菜单，例如that。

我不需要那里的所有效果，我只需要带有说明的水滴效果即可。

这是我的代码。

如您所见，这里没有什么不可理解的。

使用jQuery方法toggle的简单CSS和一些mediaqueries的小屏幕显示或隐藏汉堡..

$(".menu-trigger").click(function() {
    $(this).toggleClass('active');
    $("ul.menu li").slideToggle('fast');
})

body {
  background: lightblue !important;
  height: 1000px;
}

.header {
  height: 57px;
  background-color: #fff;
  -webkit-filter: url("#goo");
  filter: url("#goo");
}
.header h1 {
  margin: 0;
  margin-left: 60px;
}
.header h1 a {
  float: left;
  line-height: 1.5;
  width: auto;
  height: 57px;
}
.header h1 a img {
  width: 90px;
  height: 57px;
}
.header .menu-trigger {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ddd;
  position: fixed;
  top: 10px;
  right: 30px;
  z-index: 50;
}
.header .menu-trigger span {
  top: 50%;
  left: 50%;
  -webkit-transition: background-color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.header .menu-trigger span:after {
  top: 6px;
  -webkit-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
.header .menu-trigger span:before {
  top: -6px;
  -webkit-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
.header nav {
  width: 60%;
  margin: 0 auto;
}
.header nav .menu {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  text-decoration: none;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  list-style-type: none;
  margin: 0;
  height: 57px;
  line-height: 3.5;
}
.header nav .menu li a {
  text-decoration: none;
}

.active span {
  background-color: transparent !important;
  -webkit-transition: background-color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
}
.active span:after {
  top: -1px !important;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
.active span:before {
  top: -1px !important;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.header .menu-trigger span, .header .menu-trigger span:after, .header .menu-trigger span:before {
  width: 20px;
  height: 2px;
  background-color: #aaa;
  position: absolute;
  content: '';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
  <div class="menu-trigger">
    <span></span>
  </div>
  <h1 class="logo clearfix"><a href="#">Brand</a></h1>
  <nav>
    <ul class="menu">
      <li>
        <a href="#">One</a>
      </li>
      <li>
        <a href="#">Two</a>
      </li>
      <li>
        <a href="#">Three</a>
      </li>
      <li>
        <a href="#">Four</a>
      </li>
      <li>
        <a href="#">Five</a>
      </li>
      <li>
        <a href="#">Six</a>
      </li>
    </ul>
  </nav>
</header>

 <svg>
    <defs>
        <filter id="goo"> 
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/> 
                <feColorMatrix in="blur" 
                mode="matrix" 
                values="1 0 0 0 0 
                0 1 0 0 0 
                0 0 1 0 0 
                0 0 0 18 -8" result="goo"/> 
                <feBlend in="SourceGraphic" in2="goo"/> 
        </filter>
    </defs>
</svg>

Answer 1

这就是我所做的，希望它适合您。

我们将使用CSS animation实现此结果。

此外，我们将需要一些JavaScript来切换类。

分步解答：

我使用了border-radius属性，方法如下：

创建一个正方形

#droplet {
  background-color: lightblue;
  box-shadow: 1px 1px 7px #1a1a1a;
  width: 75px;
  height: 75px;
}

<div id="droplet"></div>

然后更改每个边框的半径以控制其形状。您可以使用控制所有四个角的边界半径：border-top-left-radius，border-top-right-radius，border-bottom-right-radius和border-bottom-left-radius。您可以像这样在一行上设置四个值：
```
border-radius: topLeft topRight bottomRight bottomLeft;
```
当border-radius的值在0与框的宽度（或高度）的一半之间时，将起作用。在下面的示例中，0px是一个尖角，而40px是一个圆角。这就是我们想要的液滴。

这是一个例子：
```
#droplet {
  background-color: lightblue;
  box-shadow: 1px 1px 7px #1a1a1a;
  width: 75px;
  height: 75px;
  border-radius: 5px 10px 20px 40px;
}
```
```
<div id="droplet"></div>
```

现在，我们需要创建一些称为关键帧的不同形状，这些形状将代表我们的动画。其他帧将从这些关键帧中计算出来。

.droplet {
  background-color: lightblue;
  box-shadow: 1px 1px 7px #1a1a1a;
  width: 75px;
  height: 75px;
  display: inline-block;
  margin: 20px;
}

#droplet1 {
  border-radius: 0px 0px 0px 0px;
  transform: rotate(0deg);
}
#droplet2 {
  border-radius: 0px 40px 30px 40px;
  transform: rotate(45deg);
}
#droplet3 {
  border-radius: 37px 37.5px 37.5px 37.5px;
  transform: rotate(45deg);
}

<div class="droplet" id="droplet1"></div>
<div class="droplet" id="droplet2"></div>
<div class="droplet" id="droplet3"></div>

我们可以通过使用@keyframes语法和CSS创建新的关键帧来链接所有内容。

@keyframes CSS规则通过定义动画序列中关键帧（或航点）的样式来控制CSS动画序列中的中间步骤。与过渡相比，这可以更好地控制动画序列的中间步骤。

您可以使用百分比值指定这些步骤。在这里，我定义了动画droplet。我添加了许多属性以使其看起来更好：

@keyframes droplet {
  0% {
    top: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    transform: rotate(0deg);
  }
  25% {
    top: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 30px;
  }
  30% {
    transform: rotate(45deg);
  }
  60% {
    top: 34px;
  }
  100% {
    top: 15px;
    border-top-left-radius: 37px;
    border-top-right-radius: 37.5px;
    border-bottom-left-radius: 37.5px;
    border-bottom-right-radius: 37.5px;
    transform: rotate(45deg);
  }
}

我们将创建一个单独的类来专门为元素添加动画：.active：
```
.active {
  animation: droplet 0.5s forwards;
                ↑      ↑       ↑
              name  duration  mode  
}
```
做到了：

该元素将保留由最后一个关键帧设置的样式值。

任何具有类名称active的元素都将与上面定义的关键帧建立动画。

现在，我们需要添加JavaScript代码，以打开和关闭动画：

$('#droplet').click(function() {

  $(this).toggleClass('active');

});

仅此而已。最后，我添加了实际的汉堡图标：#burger，并在其上附加了不同的动画，以确保其始终处于水平状态（#droplet在动画过程中处于旋转状态）。

版本1：汉堡动画

$('#droplet').click(function() {
  $(this).toggleClass('active');
  $(this).children().first().toggleClass('active');
});

#burger {
  position: absolute;
  top: 11px;
  left: 14px;
  transform: rotate(0deg);
}
#burger > div {
  background-color: #575757;
  width: 47px;
  height: 6px;
  margin: 9px 0;
}

#droplet {
  cursor: pointer;
  position: absolute;
  right: 60px;
  top: 10px;
  background-color: lightblue;
  box-shadow: 1px 1px 7px #1a1a1a;
  width: 75px;
  height: 75px;
  
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

#droplet.active {
  animation: droplet 0.5s forwards;
}

@keyframes droplet {
  0% {
    top: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    transform: rotate(0deg);
  }
  25% {
    top: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 30px;
  }
  30% {
    transform: rotate(45deg);
  }
  60% {
    top: 34px;
  }
  100% {
    top: 15px;
    border-top-left-radius: 37px;
    border-top-right-radius: 37.5px;
    border-bottom-left-radius: 37.5px;
    border-bottom-right-radius: 37.5px;
    transform: rotate(45deg);
  }
}

#burger.active {
  animation: burger 0.5s forwards;
}

@keyframes burger {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }
  30% {
    transform: rotate(-45deg);
  }
  20% {
    opacity: 0;
  }
  100% {
    transform: rotate(-45deg);
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="droplet">
  <div id="burger"><div></div><div></div><div></div></div>
</div>

版本2：汉堡与主标题分开

$('#droplet').click(function() {
  $(this).toggleClass('active');
  $('#menu > div').toggleClass('active');
  $('#burger').toggleClass('active');
});

body {
  margin: 0;
  padding: 0;
}

#burger {
  position: absolute;
  top: 12px;
  left: 14px;
  transform: rotate(0deg);
}
#burger > div {
  background-color: #575757;
  width: 47px;
  height: 6px;
  margin: 9px 0;
}
#droplet {
  cursor: pointer;
  position: absolute;
  right: 60px;
  top: 10px;
  background-color: lightgrey;
  width: 75px;
  height: 75px;
  
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

#droplet.active {
  animation: droplet 0.5s forwards;
}

@keyframes droplet {
  0% {
    top: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    transform: rotate(0deg);
  }
  25% {
    top: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 30px;
  }
  30% {
    transform: rotate(45deg);
  }
  60% {
    top: 34px;
  }
  100% {
    top: 15px;
    border-top-left-radius: 37px;
    border-top-right-radius: 37.5px;
    border-bottom-left-radius: 37.5px;
    border-bottom-right-radius: 37.5px;
    transform: rotate(45deg);
  }
}

#burger.active {
  animation: burger 0.5s forwards;
}

@keyframes burger {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }
  30% {
    transform: rotate(-45deg);
  }
  20% {
    opacity: 0;
  }
  100% {
    transform: rotate(-45deg);
    opacity: 1;
  }
}
#menu {
  width: 100%;
  height: 98px;
  position: absolute;
  top: 0;
  background-color: lightgrey;
}
#menu > div {
  width: 100%;
  height: 75px;
  position: relative;
  top: 98px;
	height: 200px;
	background: pink;
	background: white;
	border-radius: 0px;
}
#menu > div.active {
  animation: menu 0.2s forwards;
  
}

@keyframes menu {
  0% {
    border-radius: 0px;
    top: 98px;
  }
  75% {
    border-radius: 500px / 50px;
    top: 25px;
  }
  100% {
    border-radius: 0px;
    top: 0px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu"><div></div></div>
<div id="droplet">
  <div id="burger"><div></div><div></div><div></div></div>
</div>

版本3：固定菜单，通过滚动触发动画

const toggleAnimation = () => {

  $('#droplet').toggleClass('active');
  $('#menu').toggleClass('active');
  $('#burger').toggleClass('active');
  
}


let below = false;
$(window).scroll(() => {

  const Ypos = $(window).scrollTop();
  
  if(Ypos > 50 && !below) {
  
    below = true;
    toggleAnimation();
    
  } else if(Ypos < 50 && below) {
  
    below = false;
    toggleAnimation();
    
  }
  
});

body {
  margin: 0;
  padding: 0;
}
.v-space {
  height: 120px;
}
#burger {
  position: absolute;
  top: 12px;
  left: 14px;
  transform: rotate(0deg);
}
#burger > div {
  background-color: #575757;
  width: 47px;
  height: 6px;
  margin: 9px 0;
}
#droplet {
  cursor: pointer;
  position: fixed;
  right: 60px;
  top: 10px;
  background-color: lightgrey;
  width: 75px;
  height: 75px;
  
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

#droplet.active {
  animation: droplet 0.5s forwards;
}

@keyframes droplet {
  0% {
    top: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    transform: rotate(0deg);
  }
  25% {
    top: 10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 30px;
  }
  30% {
    transform: rotate(45deg);
  }
  60% {
    top: 34px;
  }
  100% {
    top: 15px;
    border-top-left-radius: 37px;
    border-top-right-radius: 37.5px;
    border-bottom-left-radius: 37.5px;
    border-bottom-right-radius: 37.5px;
    transform: rotate(45deg);
  }
}

#burger.active {
  animation: burger 0.5s forwards;
}

@keyframes burger {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }
  30% {
    transform: rotate(-45deg);
  }
  20% {
    opacity: 0;
  }
  100% {
    transform: rotate(-45deg);
    opacity: 1;
  }
}
#menu {
  width: 100%;
  height: 98px;
  position: fixed;
  top: 0;
  background-color: lightgrey;
}
#menu > div {
  width: 100%;
  height: 0px;
  position: relative;
  top: 98px;
	background: white;
	border-radius: 0px;
}
#menu.active > div {
  animation: menuCover 0.2s forwards;
}
#menu.active {
  animation: menu 0.2s forwards;
}
@keyframes menu {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes menuCover {
  0% {
    border-radius: 0px;
    top: 98px;
    height: 0px;
  }
  75% {
    border-radius: 500px / 50px;
    top: 25px;
  }
  100% {
    border-radius: 0px;
    top: 0px;
    height: 100px;
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu"><div></div></div>
<div id="droplet">
  <div id="burger"><div></div><div></div><div></div></div>
</div>
<div class="v-space"></div>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio metus, sollicitudin quis scelerisque eu, interdum non nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ultricies lacus ut felis fermentum, non malesuada nunc ornare. Quisque laoreet vestibulum varius. Morbi efficitur nisi in nisl rutrum, ac pretium magna vulputate. In est libero, commodo et nisi tristique, faucibus fringilla tortor. Donec sed ornare felis, vitae bibendum dui. Nulla mi nulla, vestibulum sed ullamcorper ut, venenatis at libero. In placerat odio id sapien blandit, a consectetur ligula cursus. Sed cursus dictum ipsum a ultricies.

Morbi in odio sagittis, congue orci vel, euismod nisi. Suspendisse sit amet imperdiet nulla. Nullam sollicitudin velit viverra, placerat felis sit amet, rhoncus turpis. Duis et neque malesuada, finibus massa id, ullamcorper dui. Morbi ut fringilla augue. Duis quam sem, lobortis sed gravida eu, sagittis a ex. Cras commodo bibendum tristique. Praesent in pulvinar eros, quis maximus magna. Etiam dui leo, ullamcorper in interdum at, dignissim in sem. Suspendisse ac urna mollis, feugiat eros nec, aliquam purus. Donec eget enim at enim interdum facilisis. Nam non consectetur enim. In non eros quis tortor auctor interdum.

Etiam id ipsum risus. Donec ut orci nulla. Duis lacinia, erat vitae maximus efficitur, lectus risus feugiat sem, in suscipit nibh enim efficitur nibh. Fusce sollicitudin lacinia lectus, non malesuada nisi rhoncus id. Sed id congue sem, sit amet tincidunt nulla. Etiam vitae mauris sapien. Aenean ornare volutpat libero sed interdum. Aenean placerat aliquet dolor, eleifend bibendum mi rutrum sit amet. Nullam eu lacus ornare, dapibus ante sit amet, vehicula enim. Vestibulum at euismod ex. Ut at vehicula purus, nec porttitor tellus. Vivamus consequat sapien eu est malesuada, quis varius est aliquet. Sed eu volutpat lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam varius, augue ac pretium commodo, turpis tellus commodo turpis, venenatis tristique velit odio sed quam. Phasellus tempor nisi eu massa elementum bibendum.

Sed ac egestas enim. Integer hendrerit, ligula sit amet viverra imperdiet, massa nunc consequat leo, sit amet ornare quam nisi sed elit. In pulvinar libero a ligula consectetur tincidunt. Proin fringilla turpis sagittis dolor facilisis imperdiet. In nec suscipit urna. Sed turpis justo, dapibus ac risus efficitur, lacinia suscipit nunc. Aliquam ex nisl, ultricies quis elit a, rutrum tempus metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat suscipit eleifend. Morbi a euismod augue. In facilisis lacus a est suscipit, non interdum dolor condimentum. Cras aliquet ornare diam sit amet laoreet. Aliquam sed enim varius, efficitur arcu id, tincidunt dui. Nulla scelerisque urna nec feugiat fermentum.

Suspendisse sit amet orci lacus. Pellentesque vitae ante finibus, volutpat risus et, posuere orci. Sed posuere tellus sem, sed pulvinar massa finibus ut. Duis tempor rutrum diam a vestibulum. Curabitur at libero eu urna imperdiet vehicula. Etiam aliquet maximus ipsum, eu lobortis lectus rhoncus eget. Suspendisse semper facilisis lectus. Curabitur non lectus a risus ullamcorper ultricies non pulvinar diam. Sed euismod imperdiet facilisis. Fusce sagittis nibh vel lorem accumsan fringilla.

Fusce ac leo lacus. Nullam dictum id orci nec semper. Nam non ultrices tellus. Curabitur felis erat, bibendum sit amet quam eu, luctus finibus leo. Nullam ac porta nibh, eget euismod mauris. Phasellus posuere enim sed tellus fermentum, nec vehicula nisi mattis. Vivamus elementum varius enim, vulputate dignissim enim iaculis sit amet.

Vivamus pellentesque, enim vitae porta pulvinar, eros turpis tempor mauris, in facilisis dui libero in purus. Nunc erat purus, tristique vitae ex non, commodo cursus purus. Nulla fermentum quam ac vestibulum facilisis. Duis semper nunc orci, non fringilla sem placerat ut. Mauris posuere eu urna a gravida. Nam ullamcorper, ligula a ultricies feugiat, mi ipsum viverra diam, vel aliquam velit mauris eu diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed magna dolor, malesuada at orci ut, vehicula dignissim dolor. In odio libero, vestibulum eu rhoncus eu, tempus sed diam.

Sed eget hendrerit elit, a tincidunt sapien. Suspendisse potenti. Aliquam facilisis nibh quis pulvinar condimentum. Ut interdum quam non mauris faucibus, a faucibus felis interdum. Maecenas porttitor, lorem vel fringilla semper, orci arcu varius justo, ut convallis tellus lectus et metus. Quisque porta dolor magna, ac convallis tortor egestas eu. Integer in ligula eget ipsum blandit interdum.

Cras viverra, dui finibus dictum scelerisque, quam arcu vehicula sapien, vel varius sem risus sed nulla. Cras sit amet lacus a quam vestibulum consequat et ut enim. Nunc vestibulum libero a nisi euismod tincidunt. Sed vel mollis risus. Cras convallis luctus enim sit amet suscipit. Vivamus egestas metus ut luctus consequat. Aliquam rutrum elit eu interdum consequat. Donec metus odio, sagittis sit amet bibendum nec, convallis nec nisl. Quisque eget nisl bibendum, fermentum mauris non, dictum quam. Nunc pretium faucibus risus sed pellentesque. Maecenas dictum sodales justo id rutrum. Cras vel feugiat turpis.

Quisque a malesuada nunc, non vulputate magna. Quisque ac leo consequat, auctor orci vitae, pulvinar tellus. Pellentesque euismod arcu a lacinia condimentum. Vestibulum et purus neque. Donec libero erat, auctor sed tempus et, auctor at nisl. In eu elit non turpis dapibus facilisis. Vestibulum sodales ex purus, ut ultricies risus mattis non. Donec id elementum nunc.</div>

Answer 2

由于Ivan讲得很好，这是我的轻巧镜头，没有太多解释：

complementary CodePen，具有一些额外的样式和功能
摘要中的基本功能：

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll > 100) 
    $("#drop").addClass("active");
  else if (scroll < 80) 
    $("#drop").removeClass("active");
});

body {
  margin: 0;
  padding: 0;
  background-color: #1d1e22;
}

.wrapper {
  background-color: lightgreen;
  width: 600px;
  height: 1000px;
  margin: 0 auto;
}

nav {
  width: 90%;
  height: 90px;
  padding: 0 5%;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #fff;
}

#drop {
  cursor: pointer;
  position: fixed;
  background-color: #fff;
  width: 70px;
  height: 70px;
  border-radius: 0 50% 50%;
  transform: rotate(45deg);
  transition: 0.4s ease-in-out;
}

#drop.active {
  border-radius: 50%;
  animation: drop 0.3s forwards;
}

#drop > div {
  transform: rotate(-45deg);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#drop span {
  display: block;
  background-color: lightgreen;
  width: 40px;
  height: 3px;
  margin: 5px 0;
}

@keyframes drop {
  0% {
    transform: translateY(0) rotate(45deg);
  }
  50% {
    transform: translateY(30px) rotate(45deg);
  }
  100% {
    transform: translateY(10px) rotate(45deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <nav>
    <div id="drop" class="active">
      <div>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </nav>
</div>

我没有为导航栏设置动画，因为您似乎并不关心它。让我知道我是否误解了那部分。

弹跳汉堡菜单

2 个答案:

分步解答：

版本1：汉堡动画

版本2：汉堡与主标题分开

版本3：固定菜单，通过滚动触发动画