Cara membuat bar navigasi responsif di 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> 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('mobile-menu');
  const navMenu = document.querySelector('.nav-menu');

  menu.addEventListener('click', function () {
    navMenu.classList.toggle('active');
  });
</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.基本上就这些。

Atas ialah kandungan terperinci Cara membuat bar navigasi responsif di HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!