在线公交卡管理系统导航栏的HTML/CSS/JS代码开发请求

下面是符合需求的导航栏完整实现代码，包含HTML结构、样式美化和交互逻辑，支持下拉菜单展开/收起：

HTML 结构 #

<nav class="navbar">
  <div class="nav-container">
    <!-- 导航模块 -->
    <ul class="nav-links">
      <li><a href="#home">首页</a></li>
      <li class="dropdown">
        <a href="#card" class="dropdown-toggle">新办卡</a>
        <ul class="dropdown-menu">
          <li><a href="#generate-card">生成卡</a></li>
          <li><a href="#update-card">更新卡</a></li>
        </ul>
      </li>
      <li><a href="#about">关于我们</a></li>
      <li><a href="#news">资讯</a></li>
      <li><a href="#forum">支持论坛</a></li>
    </ul>

    <!-- 账户模块 -->
    <ul class="auth-links">
      <li><a href="#register">注册</a></li>
      <li><a href="#login">登录</a></li>
    </ul>
  </div>
</nav>

CSS 样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.navbar {
  background-color: #2c3e50;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

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

.nav-links, .auth-links {
  display: flex;
  list-style: none;
}

.nav-links li, .auth-links li {
  position: relative;
}

.nav-links a, .auth-links a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 16px 20px;
  transition: background-color 0.3s ease;
}

.nav-links a:hover, .auth-links a:hover {
  background-color: #34495e;
}

/* 下拉菜单样式 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #2c3e50;
  list-style: none;
  min-width: 150px;
  display: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-menu,
.dropdown-toggle:focus + .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  padding: 12px 16px;
}

/* 响应式适配（可选） */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav-links, .auth-links {
    flex-direction: column;
    width: 100%;
  }
  .dropdown-menu {
    position: static;
    box-shadow: none;
  }
}

JavaScript 交互（增强体验） #

// 处理下拉菜单的点击交互（适合移动端或需要点击触发的场景）
document.addEventListener('DOMContentLoaded', function() {
  const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
  
  dropdownToggles.forEach(toggle => {
    toggle.addEventListener('click', function(e) {
      e.preventDefault();
      const dropdownMenu = this.nextElementSibling;
      dropdownMenu.classList.toggle('show');
      
      // 关闭其他下拉菜单
      document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
        if (menu !== dropdownMenu) {
          menu.classList.remove('show');
        }
      });
    });
  });

  // 点击页面其他区域关闭下拉菜单
  document.addEventListener('click', function(e) {
    if (!e.target.closest('.dropdown')) {
      document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
        menu.classList.remove('show');
      });
    }
  });
});

说明 #

• 导航模块包含了所有要求的选项，其中「新办卡」是下拉菜单，包含「生成卡」和「更新卡」两个子选项
• 账户模块放在导航栏右侧，包含「注册」和「登录」
• 样式做了基础美化，支持鼠标悬停展开下拉菜单，也通过JS实现了点击触发（适配移动端）
• 加入了响应式布局，在小屏幕设备上导航会垂直排列

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