如何在HTML中創建響應式導航欄

使用HTML創建包含logo、導航鏈接和漢堡菜單的語義化結構；2. 通過CSS Flexbox佈局實現桌面端導航欄樣式，並設置固定定位與響應式容器；3. 在768px以下屏幕使用媒體查詢隱藏導航菜單，顯示漢堡圖標，並通過JavaScript切換.active類控制菜單展開與收起；4. 可選添加平滑滾動、點擊鏈接後關閉移動端菜單及漢堡圖標動畫效果；5. 注意可訪問性與多設備測試，最終實現一個兼容桌面與移動設備的響應式導航欄，以完整句結束。

Creating a responsive navigation bar in HTML involves combining HTML for structure, CSS for styling and layout, and optionally a bit of JavaScript for mobile toggle functionality. Here's how to build a clean, responsive navbar that works well on both desktop and mobile devices.

1. Basic HTML Structure

Start with a simple navigation bar using semantic HTML. Use a <nav></nav> element to wrap your navigation links.

 <nav class="navbar">
  <div class="nav-container">
    <a href="#" class="nav-logo">Logo</a>

    <ul class="nav-menu">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">About</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Services</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>

    <div class="nav-toggle" id="mobile-menu">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
  </div>
</nav>

This structure includes:

• A logo link
• An unordered list for navigation links
• A mobile menu toggle (three-line "hamburger" icon)

2. Style with CSS (Flexbox Media Queries)

Use CSS to style the navbar and make it responsive.

 /* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
}

/* Navbar container */
.navbar {
  background-color: #333;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 50px;
}

.nav-logo {
  color: #fff;
  text-decoration: none;
  font-size: 2rem;
  font-weight: bold;
}

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

.nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #00c853;
}

3. Mobile Responsiveness with Media Queries and JavaScript

On smaller screens, hide the menu by default and show a hamburger icon. Toggle visibility using JavaScript.

Add mobile styles:

 /* Mobile menu button */
.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

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

/* Mobile view */
@media (max-width: 768px) {
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 80px;
    flex-direction: column;
    background-color: #333;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    padding: 2rem;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
  }

  .nav-menu.active {
    left: 0;
  }

  .nav-item {
    margin: 1.5rem 0;
  }

  .nav-toggle {
    display: flex;
  }
}

Add JavaScript for toggle functionality:

 <script>
  const menu = document.getElementById(&#39;mobile-menu&#39;);
  const navMenu = document.querySelector(&#39;.nav-menu&#39;);

  menu.addEventListener(&#39;click&#39;, function () {
    navMenu.classList.toggle(&#39;active&#39;);
  });
</script>

When the hamburger icon is clicked, the .active class is toggled, which shifts the menu into view using CSS.

4. Extra Touches (Optional)

• Smooth scrolling : Add smooth scroll behavior.

   html {
    scroll-behavior: smooth;
  }

• Close menu on link click (mobile):

   document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', () => {
      navMenu.classList.remove('active');
    });
  });

• Animated hamburger icon (optional rotation effect on click)

---

Final Notes

• The key to responsiveness is using flexbox for layout and media queries to adapt at different screen sizes.
• Always test on real devices or browser dev tools.
• Keep accessibility in mind: use proper contrast, keyboard navigation, and ARIA labels if needed.

That's it — you now have a fully functional, responsive navigation bar using just HTML, CSS, and a bit of JavaScript.基本上就這些。

以上是如何在HTML中創建響應式導航欄的詳細內容。更多資訊請關注PHP中文網其他相關文章！