手机视图下Navigation Bar无响应，汉堡菜单功能失效求助

云原生阿岚

2026-7-2

导航栏响应式汉堡菜单失效问题

我开发的导航栏不具备响应式特性，期望在手机端视图下切换为可点击的汉堡菜单，但功能未正常生效。调整页面尺寸时顶部导航栏完全消失，问题演示如下：

问题演示动图

相关代码

JavaScript

const mainMenu = document.querySelector('.mainMenu');
const closeMenu = document.querySelector('.closeMenu');
const openMenu = document.querySelector('.openMenu');

openMenu.addEventListener('click',show);
closeMenu.addEventListener('click',close);

function show(){
    mainMenu.style.display = 'flex';
    mainMenu.style.top = '0';
}
function close(){
    mainMenu.style.top = '-100%';
}

CSS

nav {
    color: white;
    display: flex;
    justify-content: space-between;

}

nav .mainMenu {
    display: flex;
    list-style: none;
        font-family: "SR";
}

nav .mainMenu li a {
    display: inline-block;
    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-size:  1.5vw;
}

nav ul li a:hover {
    color: white;
    z-index: 10000;
      font-family: "SR";
}

nav ul ul {
    position: absolute;
    top: 40px;
    display: none;
    z-index: 10000;
left: 0%;
}

nav ul li:hover > ul {
    display: block;
    z-index: 10000;
    animation: none;
}



nav ul ul li {
    width: 100%;
    float: none;
    display: list-item;
    position: relative;
    z-index: 10000;
      white-space: nowrap;
}

nav ul ul ul li {
    position: relative;
    margin-top: -60px;
    left: 100%;
    z-index: 10000;
    white-space: nowrap;
}

a.active {
    opacity: 1;
}

 ul li a:nth-of-type(1) {
     
     opacity: 0.5;
   

}

 ul li a.active:nth-of-type(1) {
   color: #fff;
   opacity: 1;

   cursor: url(Cursors/3.png), auto;

}
 ul li a:hover:nth-of-type(1) {
    color: #fff;
    opacity: 1;
 
    position: sticky;
    border: none;
    box-shadow: none;
    transition-delay: 0s;

 
    cursor: url(Cursors/3.png), auto;
}

 a:nth-of-type(2) {
z-index: 10000;

}


nav ul li {
    background: transparent;
    position: relative;
    list-style: none;
    display: inline-block;
    z-index: 10000;
  font-family: "SU";

}

nav .openMenu {
    font-size: 1.9vw;
    margin: 20px;
    display: none;
    cursor: pointer;
}

nav .mainMenu .closeMenu, .icons i {
    font-size: 1.9vw;
    display: none;
    cursor: pointer;
}

nav .logo {

    font-size: 1.7vw;
    cursor: pointer;
      letter-spacing: 0.2rem;
      margin-left: 2%;
      margin-top: 0.8%;
      padding-top: 10px;
}

.mainMenu {

    margin-top: 1%;
}
@media only screen and (max-width: 414px)  {


    nav .mainMenu {
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10000;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: black;
        transition: top 1s ease;
        display: none;
    
    }


   
    nav .mainMenu .closeMenu {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
    }



    nav .openMenu {
        display: block;
    }

    i {
        display: inline-block;
        padding: 12px;
        
        margin-top: -40%;
        left: ;
    }



.closeMenu {
    position: absolute;
    margin-top: -538px;
    left: 131px;
}

 nav .logo {
    margin: 6px;
    font-size: 3.8vw;
    cursor: pointer;
      letter-spacing: 0.2rem;
      margin-left: 4%;
      margin-top: 0.5%;

}

nav a {
    font-size: 3vw;
}


nav .mainMenu li a {
    display: inline-block;
    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-size:  5vw;
}

nav ul ul ul li {
    position: relative;
    margin-top: -60px;
    left: 150%;
    z-index: 10000;

   }
   nav ul ul li {
    width: 100%;
    float: none;
    display: list-item;
    position: relative;
    z-index: 10000;
    white-space: normal;
    margin-left: 90%;
    margin-top: -30%;
  
}
.masonry .mItem {
  display: inline-block;
  margin-bottom: 4px;
  width: 98%;
  z-index: -1;
}

img {
    z-index: 10000;
}
}

HTML

<nav>
        <div class="logo"><h2>GALLERY</h2></div>
        <div class="openMenu"><i class="fa fa-bars fa-3x" ></i></div>
        <ul class="mainMenu">
        <li><a href="#" class="active">Gallery</a></li>
                <li><a href="https://ayanfesanusi.com/">Home</a></li>
                <li><a href="https://ayanfesanusi.com/About/index.html">About</a></li>
                <li class="hasDD"><a href="https://ayanfesanusi.com/About/Projects/index.html">Projects</a></li>
                <li><a href="https://ayanfesanusi.com/About/Contact/index.html">  Contact</a><li>
                <div class="closeMenu"><i class="fa fa-times fa-4x"></i></div>
        </ul>           
    </nav>

问题修复方案

1. 修复CSS样式冲突

删除媒体查询外的全局.closeMenu样式，避免覆盖导航栏内关闭按钮的定位规则：

/* 移除这段代码 */
.closeMenu {
    position: absolute;
    margin-top: -538px;
    left: 131px;
}

2. 优化菜单显示/隐藏逻辑

修改JavaScript的close函数，配合过渡动画同步控制菜单显示状态：

function close(){
    mainMenu.style.top = '-100%';
    // 等待过渡动画完成后隐藏菜单，避免后续显示异常
    setTimeout(() => {
        mainMenu.style.display = 'none';
    }, 1000);
}

3. 调整移动端菜单初始状态

在媒体查询中，将菜单初始状态改为通过top属性隐藏，保留flex布局以支持过渡动画：

@media only screen and (max-width: 414px)  {
    nav .mainMenu {
        height: 100vh;
        position: fixed;
        top: -100%; /* 初始隐藏 */
        right: 0;
        left: 0;
        z-index: 10000;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: black;
        transition: top 1s ease;
        display: flex; /* 保持flex布局，用top控制显示/隐藏 */
    }
}

4. 修复HTML标签错误

闭合Contact对应的<li>标签，确保DOM结构完整：

<li><a href="https://ayanfesanusi.com/About/Contact/index.html">  Contact</a></li>

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