如何修复移动端侧边菜单无法滑入的问题

移动端侧边菜单无法从右向左滑入，根本原因是 javascript 执行中断（document.getelementbyid(“current-year”) 报错），导致后续的菜单切换逻辑未运行；修复后配合正确的 css 过渡属性即可实现流畅滑动效果。

在开发响应式导航菜单时，一个常见需求是：点击汉堡按钮（hamburger）后，侧边菜单从屏幕右侧平滑滑入（slide-in from right）。但如你所遇，即使写了 transition 和 width/margin 变化，菜单仍无反应——这往往不是 css 问题，而是 js 执行被阻断所致。

? 根本原因：javaScript 运行时错误中断了整个脚本

你的 main.js 第 4 行存在如下代码：

document.getElementById("current-year").innerhtml = year;

但 HTML 中并未定义 id=”current-year” 的元素（例如 ）。浏览器执行到此处时抛出 TypeError: Cannot set properties of NULL，JS 引擎立即中止后续所有代码（包括 navToggle.addEventListener(…)），因此菜单切换逻辑根本未注册，点击毫无响应。

✅ 验证方法：打开浏览器开发者工具（F12 → console），必见红色报错，定位到 main.js:4。

✅ 解决方案：两步修复

1. 修复 JS 错误（必做）

任选其一：

• 推荐：注释或删除报错行（若暂不需要年份显示）：

  // document.getElementById("current-year").innerHTML = year; // ← 注释掉

• 或在 HTML 的合适位置（如页脚）添加对应元素：

2. 确保 CSS 过渡生效（关键细节）

你当前的 CSS 已基本正确，但需确认以下三点：

• ✅ .primary-navigation 在移动断点下初始状态为 width: 0vw; 且 overflow: hidden;（防止内容溢出）；
• ✅ 添加 overflow: hidden 防止过渡时内容“闪现”：

  @media (max-width: 50em) {   .primary-navigation {     /* ... 其他样式 */     width: 0vw;     overflow: hidden; /* ← 关键！阻止内容提前显示 */     transition: width 0.5s ease, opacity 0.5s ease;   }   .primary-navigation-mobile {     width: 50vw;     opacity: 1;   } }

• ✅ 确保 .primary-navigation 始终为 display: block（你已用 display: none → display: block 切换，但 display 不支持过渡，故建议改用 opacity + width 或 transform 更可靠）：

? 更优实践（推荐）：使用 transform 实现高性能滑动
替换 CSS 中的 width 方案，改用 transform: translateX()（GPU 加速，更流畅）：

@media (max-width: 50em) {   .primary-navigation {     position: fixed;     top: 0;     right: 0;     height: 100vh;     width: 80vw; /* 设定实际宽度 */     background-color: var(--clr-primary-opacity);     padding-top: 10rem;     padding-right: 3rem;     z-index: 1000;     transform: translateX(100%); /* 初始隐藏在右侧外 */     transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);   }   .primary-navigation-mobile {     transform: translateX(0); /* 滑入屏幕 */   } }

同时移除 display: none/block 切换逻辑（因 transform 自带显示控制），JS 保持简洁：

navToggle.addEventListener("click", () => {   primaryNav.classlist.toggle("primary-navigation-mobile");   navToggle.classList.toggle("opened");   navToggle.setAttribute("aria-expanded", primaryNav.classList.contains("primary-navigation-mobile")); });

? 总结与注意事项

• JS 错误优先级高于 CSS：任何未捕获的 JS 运行时错误都会阻断后续逻辑，务必先检查 Console。
• 避免 display 与 transition 混用：display: none → block 无法过渡，应改用 opacity、visibility 或 transform。
• 性能提示：transform 和 opacity 是仅有的两个能触发 GPU 加速的 CSS 属性，适合动画场景。
• 可访问性保留：你的 aria-expanded 和 aria-controls 使用正确，确保屏幕阅读器可识别菜单状态。

修复后，点击汉堡图标，菜单将从右侧丝滑滑入，体验即刻升级 ✅。