如何为汉堡菜单添加动画？点击myLinks时从左侧滑入推送页面

点击汉堡菜单按钮时，需实现id为myLinks的导航菜单从左侧滑入，同时推送页面内容，过渡时长设置为3秒，尝试多种方法未达到预期效果，求解决方案。

原代码如下：

原JavaScript代码 #

function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

原CSS代码 #

body {
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
  align-items: center;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  align-content: center;
  background: #ddd;
}

.topnav a.icon {
  background: white;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.topnav a:hover {
  background-color: white;
  color: black;
}

.active {
  background-color: white;
  color: black;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.topnav-buttons {
  display: flex;
  gap: 10px;
  position: absolute;
  right: 0;
  top: 0;
  height: 48px;
}

* {
  margin: 0;
}

原HTML代码 #

<div class="topnav">
  <a class="active">INVOICE</a>
  <div class="topnav-buttons">
    <button onclick="location.href='invoiceAdd.html'">Add Invoice</button>
  </div>
  <div id="myLinks">
    <a href="transactions.html">Transaction</a>
    <a href="product.html">Product</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

display属性不支持CSS过渡动画，因此需要改用transform和position属性实现滑入效果，同时通过控制body的外边距实现页面推送。以下是修改后的代码：

修改后的完整代码 #

JavaScript #

function myFunction() {
  const myLinks = document.getElementById("myLinks");
  const body = document.body;
  
  // 切换菜单的激活类，控制滑入/滑出
  myLinks.classList.toggle("menu-active");
  // 切换body的推送类，控制页面偏移
  body.classList.toggle("page-pushed");
}

CSS #

body {
  font-family: Arial, Helvetica, sans-serif;
  transition: margin-left 3s ease;
  margin: 0;
}

/* 页面推送状态 */
body.page-pushed {
  margin-left: 250px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
  align-items: center;
  height: 48px;
}

.topnav #myLinks {
  position: fixed;
  top: 48px;
  left: -250px;
  width: 250px;
  height: calc(100vh - 48px);
  background: #ddd;
  transition: left 3s ease;
  margin: 0;
  padding: 0;
}

/* 菜单激活状态：滑入视野 */
.topnav #myLinks.menu-active {
  left: 0;
}

.topnav a {
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  align-content: center;
  background: #ddd;
}

.topnav a.icon {
  background: white;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topnav a:hover {
  background-color: white;
  color: black;
}

.active {
  background-color: white;
  color: black;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 48px;
  height: 48px;
}

.topnav-buttons {
  display: flex;
  gap: 10px;
  position: absolute;
  right: 0;
  top: 0;
  height: 48px;
  align-items: center;
  padding-right: 10px;
}

* {
  margin: 0;
  box-sizing: border-box;
}

HTML #

<div class="topnav">
  <a class="active">INVOICE</a>
  <div class="topnav-buttons">
    <button onclick="location.href='invoiceAdd.html'">Add Invoice</button>
  </div>
  <div id="myLinks">
    <a href="transactions.html">Transaction</a>
    <a href="product.html">Product</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

关键修改说明 #

1. 替换显示逻辑：移除display: none/block的切换方式，改用left属性结合CSS过渡实现滑入/滑出，因为display不支持过渡动画。
2. 页面推送实现：给body添加page-pushed类，通过修改margin-left实现页面向右推送的效果，同时给body添加过渡保证动画同步。
3. 菜单定位：将myLinks设置为fixed定位，固定在导航栏下方，避免页面滚动时菜单位置偏移。
4. 过渡配置：统一设置transition: ... 3s ease，确保菜单滑入和页面推送的动画时长一致，都是3秒。

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