如何实现点击汉堡菜单按钮联动导航菜单淡入滑出效果

你现有代码只完成了汉堡按钮自身的动效，没有绑定导航的状态切换，也没写导航的过渡样式，按以下步骤修改即可实现需求：

• 给JS逻辑补充导航元素的选中与状态类切换
• 给导航元素设置初始隐藏状态、平滑过渡属性
• 定义导航激活时的居中、不透明样式，顺便修正原有CSS的语法错误

1. 替换原有JS代码 #

var menu = document.getElementById("menu");
const nav = document.querySelector('nav');
menu.onclick = function(){
  menu.classList.toggle("openmenu");
  nav.classList.toggle("nav-open");
}

2. 修改/补充CSS样式 #

首先替换原有.container2样式块：

.container2{
  background: #333;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

然后替换原有nav样式块，补充初始状态与过渡属性：

nav{
  background: #fff;
  border-radius: 50px;
  padding: 10px;
  box-shadow: 0 25px 20px -20px #000;
  /* 初始隐藏状态：向上偏移、全透明、屏蔽点击 */
  opacity: 0;
  transform: translateY(-120px);
  pointer-events: none;
  /* 匹配汉堡按钮的动画时长，做平滑过渡 */
  transition: all 0.5s ease;
}

在CSS末尾追加导航激活状态的样式：

nav.nav-open{
  opacity: 1;
  /* 滑动到页面垂直居中位置 */
  transform: translateY(calc(50vh - 60px));
  pointer-events: auto;
}

最后修正原有导航项的padding语法错误，把nav ul li里的padding: 13px, 35px;改成padding: 13px 35px;，去掉逗号，否则内边距不会生效。

最终效果 #

点击汉堡按钮时，按钮自动切换为叉号状态，导航菜单从页面顶部平滑下滑到居中位置，同时透明度从0过渡到100%；再次点击按钮，导航向上滑出同时淡出隐藏，和你预期的交互完全一致。

内容的提问来源于stack exchange，提问作者kunai