如何用HTML、CSS实现移动端居中下拉导航栏？现有代码异常求修复

现有代码问题排查 #

• 类名不匹配：HTML中容器使用nav_container类名，SCSS中错误写为.navbar_container，导致容器布局样式失效
• 缺少激活状态样式：JS逻辑会为nav元素切换menu-btn类，但SCSS中没有定义该类对应的显示规则，点击菜单后导航仍无法显示
• 过渡属性拼写错误：transition: all 0.4 ease 缺失时间单位，应为transition: all 0.4s ease

修复后可运行代码 #

修正后的SCSS代码 #

// 提前定义用到的CSS变量
:root {
  --primary-blue: #2563eb;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
.navbar {
    background: black;
    height: 70px;
    padding: 0 1em;

    .nav_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

    nav{
       display: none;
       position: fixed;
       width: 100%;
       height: 58vh;
       padding: 1em; 
       top: 0;
       right: 0;
       z-index: 999;
       background: var(--primary-blue);
       // 新增激活状态显示规则
       &.menu-btn {
            display: block;
       }

       ul {
           margin-top: 2.1em;
           padding: 0;
       }

       li {
           a {
               display: block;
               padding: .9em;
               font-size: 2em;
               font-weight: 500;
               text-align: center;
               opacity: 0.85;
               color: white;

               &:hover {
                   opacity: 1;
                   transition: all 0.4s ease;
               }
           }
       }
    }
}

 .mobile-close-icon {
    position: absolute;
    right: 0px;
    margin-right: 1em;
    cursor: pointer;
    font-size: 3em;
    color: white;
    opacity: 0.85;
    top: 15px;

    &:hover {
        opacity: 1;
    }
}


.mobile-menu-icon {
    cursor: pointer;
    color: white;
    position: absolute; 
    right: 0px;
    margin-right: 1em;
    top: 15px;
    width: 40px;
    height: 40px;
} 

纯CSS无JS实现方案（可选） #

如果不想用任何JS代码，可以替换原有逻辑，用checkbox伪类实现菜单开关：

1. 替换HTML导航部分代码：

<!-- Navigation bar section -->
<header class="navbar">
    <div class='nav_container'>
        <!-- 新增隐藏的checkbox作为开关 -->
        <input type="checkbox" id="menu-toggle" style="display:none;">
        <!-- 菜单按钮绑定checkbox -->
        <label for="menu-toggle">
            <ion-icon class="mobile-menu-icon" name="menu-outline"></ion-icon>
        </label>

        <nav>
            <!-- 关闭按钮绑定同一个checkbox -->
            <label for="menu-toggle">
                <ion-icon class="mobile-close-icon" name="close-outline"></ion-icon>
            </label>

            <ul class="primary_nav">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>

2. 修改SCSS中导航激活的选择器即可，完全删除原有JS代码：

nav{
    display: none;
    /* 原有其他样式全部保留 */
}
#menu-toggle:checked ~ nav {
    display: block;
}

验证效果 #

移动端视图下点击菜单图标即可弹出居中的导航下拉框，点击关闭按钮或导航链接即可收起菜单，所有链接自动居中对齐。

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