移动端网站导航栏双重异常问题：切换按钮右侧可见及媒体查询导航栏未完全隐藏

问题1：移动端导航栏在切换按钮右侧始终可见 #

排查原因：

你的CSS选择器完全不匹配目标元素——JS里通过getElementById("navLinks")获取导航栏，但CSS写的是links{...}，这是标签选择器（只会匹配<links>这种自定义标签，显然你页面里没这个元素），而非对应ID的选择器#navLinks。这直接导致定位样式根本没应用到导航栏上，所以它一直呆在默认位置（按钮右侧）。

解决方法：

立刻修正CSS选择器，把links改成#navLinks，同时优化过渡属性的写法（明确指定过渡的属性，更严谨）：

#navLinks{ 
    position:absolute; 
    background:#f44336; 
    padding:5px; 
    line-height: 50px; 
    height:100vh; 
    width:200px; 
    top:0; 
    right:-200px; /* 初始状态隐藏到屏幕外 */
    text-align: left; 
    z-index:2; 
    transition: right 1s; /* 只过渡right属性，减少性能开销 */
}

问题2：移动端导航栏未真正隐藏（始终出现在屏幕最右侧） #

排查原因：

除了上述选择器错误，大概率还有两个潜在问题：

1. 媒体查询配置错误：如果你的移动端样式没被正确包裹在媒体查询里，或者断点写反了（比如用了min-width而非max-width），会导致移动端样式不生效，导航栏没法被定位到屏幕外。
2. 父容器溢出设置问题：如果导航栏的父容器（比如<body>或页面外层容器）是overflow-x: visible，超出屏幕的元素依然会被显示出来。

解决方法：

1. 把移动端导航样式正确包裹在媒体查询中（以768px为移动端断点举例）：

   /* 桌面端导航的正常样式（保留你原有的代码） */
   /* ... */
   
   /* 仅在屏幕宽度≤768px时生效的移动端导航样式 */
   @media (max-width: 768px) {
       #navLinks{ 
           position:absolute; 
           background:#f44336; 
           padding:5px; 
           line-height: 50px; 
           height:100vh; 
           width:200px; 
           top:0; 
           right:-200px; 
           text-align: left; 
           z-index:2; 
           transition: right 1s; 
       }
   }
   

2. 给页面最外层容器（比如<body>）添加溢出隐藏，防止超出屏幕的元素显示：

   body {
       overflow-x: hidden;
   }
   

3. 确认切换按钮的事件绑定正确：
   确保你的汉堡按钮和关闭按钮正确调用了JS函数，比如：

   <!-- 移动端汉堡按钮 -->
   <button onclick="showMenu()">☰</button>
   <!-- 导航栏内的关闭按钮 -->
   <span onclick="hideMenu()" style="cursor:pointer;">×</span>
   

额外优化小技巧 #

可以用transform: translateX(100%)替代right:-200px，性能更优（transform会触发GPU加速，过渡更流畅），修改后的代码如下：

#navLinks{ 
    position:absolute; 
    background:#f44336; 
    padding:5px; 
    line-height: 50px; 
    height:100vh; 
    width:200px; 
    top:0; 
    right:0;
    transform: translateX(100%); /* 初始隐藏 */
    text-align: left; 
    z-index:2; 
    transition: transform 0.3s ease;
}

var navLinks = document.getElementById("navLinks"); 
function showMenu(){ 
    navLinks.style.transform = "translateX(0)"; 
} 
function hideMenu(){ 
    navLinks.style.transform = "translateX(100%)"; 
}

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