XHU.HTML：设计和实现西华大学主页导航栏多级菜单

前端

2023-12-02 14:18:30

多级导航栏：让您的网站导航井然有序

导航栏的作用

在一个注重用户体验的互联网时代，一个设计美观、用户友好的网站对于提升用户参与度和转化率至关重要。而网站的导航栏无疑是其中的关键元素。它为用户提供了一个直观的界面，帮助他们轻松找到所需的信息，从而优化他们的浏览体验。

多级导航栏的优势

当网站信息丰富时，使用多级导航栏可以有效地整理和分类内容，让用户能够快速找到他们想要的。它通过创建子菜单来组织相关信息，帮助用户在不同的主题和类别中无缝导航。

设计和实现一个多级导航栏

以西华大学主页为例，我们一步一步地演示如何设计和实现一个多级导航栏：

1. 添加 CSS 样式

在 xhu.html 文件的 head 标签内添加以下 CSS 样式代码：

/* 导航栏样式 */
#nav {
  background-color: #fff;
  height: 50px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
}

/* 导航栏链接样式 */
#nav li {
  float: left;
  margin-right: 20px;
  padding: 10px 15px;
  text-decoration: none;
  color: #000;
}

/* 导航栏链接悬停样式 */
#nav li:hover {
  background-color: #eee;
}

/* 导航栏子菜单样式 */
#nav .sub-menu {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  background-color: #fff;
}

/* 导航栏子菜单链接样式 */
#nav .sub-menu li {
  float: none;
  margin: 0;
  padding: 10px 15px;
  text-decoration: none;
  color: #000;
}

/* 导航栏子菜单链接悬停样式 */
#nav .sub-menu li:hover {
  background-color: #eee;
}

2. 添加 HTML 代码

在 body 标签内添加导航栏的 HTML 代码：

<body>
  <header>
    <nav id="nav">
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a>
        <ul class="sub-menu">
          <li><a href="#">历史沿革</a></li>
          <li><a href="#">学校领导</a></li>
          <li><a href="#">院系设置</a></li>
        </ul>
      </li>
      <li><a href="#">教学科研</a>
        <ul class="sub-menu">
          <li><a href="#">本科教育</a></li>
          <li><a href="#">研究生教育</a></li>
          <li><a href="#">继续教育</a></li>
          <li><a href="#">科研成果</a></li>
        </ul>
      </li>
      <li><a href="#">招生就业</a>
        <ul class="sub-menu">
          <li><a href="#">招生简章</a></li>
          <li><a href="#">录取查询</a></li>
          <li><a href="#">毕业生就业</a></li>
        </ul>
      </li>
      <li><a href="#">信息公开</a>
        <ul class="sub-menu">
          <li><a href="#">财务公开</a></li>
          <li><a href="#">政府采购</a></li>
          <li><a href="#">基建工程</a></li>
          <li><a href="#">人事公开</a></li>
        </ul>
      </li>
      <li><a href="#">校园文化</a>
        <ul class="sub-menu">
          <li><a href="#">校园新闻</a></li>
          <li><a href="#">校园活动</a></li>
          <li><a href="#">社团风采</a></li>
          <li><a href="#">校园美景</a></li>
        </ul>
      </li>
      <li><a href="#">联系我们</a></li>
    </nav>
  </header>

  <!-- 其他内容 -->

</body>

3. 添加 JavaScript 代码

最后，使用 JavaScript 代码来控制子菜单的显示和隐藏：

// 获取导航栏中的所有链接元素
var navLinks = document.querySelectorAll("#nav li a");

// 遍历所有链接元素
for (var i = 0; i < navLinks.length; i++) {
  // 为每个链接元素添加事件监听器
  navLinks[i].addEventListener("click", function(e) {
    // 获取当前链接元素的子菜单元素
    var subMenu = this.nextElementSibling;

    // 如果子菜单元素存在
    if (subMenu) {
      // 防止默认行为（即跳转到链接对应的页面）
      e.preventDefault();

      // 切换子菜单元素的显示状态
      subMenu.classList.toggle("active");
    }
  });
}