响应式网站导航开发疑问：大屏顶部常规菜单与小屏底部菜单是否需创建两个独立菜单？

嘿，这个需求我太熟悉了！完全不需要创建两个独立的<nav>元素——那样不仅代码冗余，维护起来也麻烦。下面给你两种实用的实现思路，都能满足大屏顶部导航、小屏底部导航的需求：

方法1：复用同一个菜单结构，动态调整样式 #

这种方法最推荐，因为它最大限度减少了重复代码。核心是用CSS媒体查询，根据屏幕尺寸切换菜单的位置、显示内容和布局：

基础HTML #

我们把所有可能用到的导航项放在同一个菜单里，通过CSS控制哪些显示、哪些隐藏：

<nav class="main-nav">
  <img src="logo.png" alt="网站logo" class="nav-logo">
  <ul class="nav-items">
    <!-- 大屏显示的文字链接 -->
    <li class="text-item"><a href="#">Link 1</a></li>
    <li class="text-item"><a href="#">Link 2</a></li>
    <li class="text-item"><a href="#">Link 3</a></li>
    <!-- 小屏显示的图标项 -->
    <li class="icon-item"><i class="fas fa-search"></i></li>
    <li class="icon-item"><i class="fas fa-settings"></i></li>
    <li class="icon-item"><i class="fas fa-home"></i></li>
  </ul>
</nav>

CSS样式 #

先定义大屏（比如宽度>768px）的顶部导航样式：

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 1rem 2rem;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-items {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
}

/* 大屏隐藏图标项 */
.icon-item {
  display: none;
}

/* 给body加顶部内边距，避免内容被固定导航挡住 */
body {
  padding-top: 60px;
}

然后用媒体查询定义小屏（宽度≤768px）的底部导航样式：

@media (max-width: 768px) {
  .main-nav {
    /* 切换到底部固定 */
    top: auto;
    bottom: 0;
    justify-content: center;
    padding: 0.8rem 0;
  }

  /* 小屏隐藏logo和文字链接 */
  .nav-logo, .text-item {
    display: none;
  }

  .nav-items {
    width: 100%;
    justify-content: space-around;
  }

  /* 显示图标项 */
  .icon-item {
    display: block;
    font-size: 1.3rem;
    cursor: pointer;
  }

  /* 调整body内边距，避免底部导航遮挡内容 */
  body {
    padding-top: 0;
    padding-bottom: 60px;
  }
}

方法2：同一容器内切换不同内容块 #

如果大屏和小屏的导航内容差异极大（比如完全没有重叠项），可以在同一个<nav>里放两个内容块，通过媒体查询控制显示/隐藏：

HTML #

<nav class="responsive-nav">
  <!-- 大屏内容 -->
  <div class="desktop-nav">
    <img src="logo.png" alt="网站logo">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>

  <!-- 小屏内容 -->
  <div class="mobile-nav">
    <ul>
      <li><i class="fas fa-search"></i></li>
      <li><i class="fas fa-settings"></i></li>
      <li><i class="fas fa-home"></i></li>
    </ul>
  </div>
</nav>

CSS #

/* 默认显示大屏导航 */
.desktop-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
}

.desktop-nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

/* 默认隐藏小屏导航 */
.mobile-nav {
  display: none;
}

body {
  padding-top: 60px;
}

/* 小屏切换显示 */
@media (max-width: 768px) {
  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 0.8rem 0;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
  }

  .mobile-nav ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 0;
  }

  body {
    padding-top: 0;
    padding-bottom: 60px;
  }
}

额外小技巧 #

• 可以给导航的位置切换加上transition属性，让切换更平滑，比如在.main-nav里加transition: all 0.3s ease;
• 如果需要移动端点击展开菜单（而非直接显示底部导航），可以结合JavaScript，但你的需求里是直接显示底部菜单，所以上面的代码足够
• 测试时记得覆盖不同屏幕尺寸，确保导航在各种设备上都正常显示

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