如何无需CSS框架编写一套同时适配移动端与桌面端的HTML导航栏

核心思路是复用同一组导航链接节点，通过媒体查询和状态类切换不同设备下的样式，完全不需要CSS框架，原生代码即可实现。

第一步：重构HTML结构，删除重复导航项 #

只保留一组导航链接，把汉堡触发按钮、关闭按钮都整合到同一个nav容器内，避免重复定义导航项：

<nav class="navbar">
  <div class="logo-position">
    <a href="#" class="logo">LOGO</a>
  </div>
  <!-- 汉堡按钮 移动端显示 -->
  <div class="navbar-toggle" onclick="openNav()">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
  <!-- 唯一一组导航链接 双端复用 -->
  <ul id="sidenav" class="main-nav">
    <!-- 关闭按钮 移动端显示 -->
    <li class="close-wrapper">
      <a href="javascript:void(0)" class="closebutton" onclick="closeNav()">&times;</a>
    </li>
    <li><a href="#" class="nav-links">Home</a></li>
    <li><a href="#" class="nav-links">About</a></li>
    <li><a href="#" class="nav-links">Portfolio</a></li>
    <li><a href="#" class="nav-links">Contact</a></li>
  </ul>
</nav>

第二步：调整CSS样式，通过媒体查询区分双端表现 #

.navbar {
  background-color: white;
  padding-bottom: 10px;
  width: 100%;
  position: relative;
}
/* 移动端默认样式：侧边抽屉 */
.main-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  background-color: white;
  overflow-x: hidden;
  padding-top: 80px;
  margin: 0;
  padding-left: 0;
  list-style: none;
  transition: width 0.3s ease; /* 平滑展开收起动画 */
}
.main-nav li a {
  display: block;
  padding: 8px 24px;
}
.close-wrapper {
  position: absolute;
  top: 0;
  right: 5px;
}
.closebutton {
  font-size: 56px;
  padding: 0 !important;
}
.navbar-toggle {
  position: absolute;
  top: 8px;
  right: 20px;
  font-size: 19px;
  cursor: pointer;
}
.bar1,.bar2,.bar3 {
  width: 25px;
  height: 2px;
  background-color: black;
  margin: 6px 0;
}
/* 桌面端样式：768px以上生效 */
@media (min-width: 768px) {
  .main-nav {
    width: auto !important; /* 覆盖JS动态设置的width属性 */
    position: static;
    height: auto;
    padding-top: 0;
    overflow: visible;
    display: flex;
    margin-right: 30px;
    flex-direction: row;
    justify-content: flex-end;
  }
  .close-wrapper, .navbar-toggle {
    display: none;
  }
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

第三步：复用原有JS逻辑 #

原有JS代码不需要修改，直接沿用即可：

function openNav() {
  document.getElementById("sidenav").style.width = "250px";
}
function closeNav() {
  document.getElementById("sidenav").style.width = "0";
}

补充说明 #

• 代码完全复用了同一组导航链接，后续修改导航项只需要改一处即可，不会出现双端内容不一致的问题
• 没有依赖任何CSS框架，全部是原生CSS和JS实现，兼容性覆盖绝大多数主流浏览器
• 可以根据自己的需求调整媒体查询的断点（当前为768px）、侧边栏宽度、动画效果等参数
• 如果不想使用JS实现，也可以通过隐藏的checkbox+兄弟选择器的纯CSS方案实现菜单的展开收起，不需要任何JS代码。

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