🌐 响应式导航栏设计教程

响应式导航栏是现代网页设计的核心技能之一，能确保网站在不同设备上都能提供最佳体验。以下是实现步骤：

🛠️ 1. 基础结构（HTML）

使用 <nav> 标签创建导航栏容器，搭配 <ul> 和 <li> 实现菜单项：

<nav class="navbar">
  <div class="logo">MySite</div>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
  <div class="hamburger" onclick="toggleMenu()">☰</div>
</nav>

🎨 2. 样式设计（CSS）

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #333;
  color: #fff;
  padding: 1rem 2rem;
}

.menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

/* 移动设备适配 */
@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    background: #444;
  }
  .menu.active {
    display: flex;
  }
}

📱 3. 交互功能（JavaScript）

function toggleMenu() {
  const menu = document.querySelector('.menu');
  menu.classList.toggle('active');
}

📌 扩展阅读

想深入了解响应式设计原理？点击这里查看更详细的教程。