网站底部固定自适应导航菜单实现与适配求助

问题核心 #

当前代码存在两个关键问题：

• Logo与菜单项容器存在间隙，无法实现视觉上的无缝衔接
• 未做移动端适配，小屏设备下菜单会溢出或显示异常

修复后完整实现 #

HTML 调整 #

移除冗余结构，添加移动端汉堡切换按钮：

<div class="navbar">
  <a href="/" class="navbar__logo">
    <img src="/assets/icons/logo.png" alt="Logo">
  </a>

  <!-- 移动端汉堡按钮 -->
  <button class="navbar__toggle" aria-label="打开菜单">
    <span></span>
    <span></span>
    <span></span>
  </button>

  <div class="navbar__container">
    <a href="/" class="navbar__link navbar__link-selected">Связаться</a>
    <a href="/vacancies" class="navbar__link">Вакансии</a>
    <a href="/contacts" class="navbar__link">Контакты</a>
  </div>
</div>

SCSS 完整代码 #

解决衔接问题并添加响应式适配：

.navbar {
  z-index: 10000;
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  gap: 0; // 移除间隙实现无缝衔接
}

.navbar__logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: rgba(68, 68, 74, 1);
  border-radius: 50px 0 0 50px; // 左侧圆角，右侧直角衔接菜单容器
  padding: 10px;
}

.navbar__logo img {
  max-height: 100%;
}

.navbar__container {
  background-color: rgba(68, 68, 74, 1);
  height: 60px;
  border-radius: 0 50px 50px 0; // 右侧圆角，左侧直角衔接logo
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.navbar__link {
  font-size: 24px;
  line-height: 100%;
  color: #fff;
  text-decoration: none;
  background-color: transparent;
  border-radius: 40px;
  padding: 14px 24px;

  &:hover {
    background-color: #6b6b6b;
  }
}

.navbar__link-selected {
  background-color: #27272b;

  &:hover {
    background-color: #27272b;
  }
}

// 移动端适配
.navbar__toggle {
  display: none;
  flex-direction: column;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.navbar__toggle span {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 3px 0;
  transition: 0.3s;
}

@media (max-width: 768px) {
  .navbar {
    flex-wrap: wrap;
    width: 90%;
    bottom: 20px;
  }

  .navbar__logo {
    border-radius: 50px; // 移动端恢复圆形
    flex: 0 0 auto;
  }

  .navbar__toggle {
    display: flex;
    order: 2;
    background-color: rgba(68, 68, 74, 1);
    border-radius: 50px;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }

  .navbar__container {
    position: absolute;
    bottom: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    height: auto;
    padding: 20px;
    border-radius: 20px;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
  }

  // 菜单展开状态
  .navbar__container.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .navbar__link {
    font-size: 18px;
    width: 100%;
    text-align: center;
    padding: 12px 0;
  }
}

移动端菜单切换JS #

const toggleBtn = document.querySelector('.navbar__toggle');
const navContainer = document.querySelector('.navbar__container');

toggleBtn.addEventListener('click', () => {
  navContainer.classList.toggle('active');
});

// 点击菜单链接后自动关闭
document.querySelectorAll('.navbar__link').forEach(link => {
  link.addEventListener('click', () => {
    navContainer.classList.remove('active');
  });
});

关键修复说明 #

• 无缝衔接处理：将.navbar的gap设为0，分别给Logo和菜单容器设置单侧圆角，实现视觉上的无缝连接
• 移动端适配：
  • 768px以下显示汉堡按钮，默认隐藏菜单容器
  • 通过CSS类切换菜单的显示/隐藏状态
  • 调整菜单为垂直布局，优化小屏触控体验
  • 重新调整Logo和按钮布局，适配移动端视觉比例

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