CSS搭建美观的多层级嵌套式弹出菜单

2023-10-11 01:42:57

多层级嵌套式弹出菜单是现代网页设计中常见的需求，它们不仅提升了界面的美观性，还能为用户提供更加丰富的交互体验。本文将详细介绍如何使用HTML、CSS和JavaScript来构建一个美观且功能完善的多层级嵌套式弹出菜单。

HTML 结构

首先，我们需要使用HTML来构建菜单的基础结构。这包括使用<ul>和<li>元素来定义菜单项，并且对于有子菜单的菜单项，在其内部再嵌套一层<ul>和<li>元素。每个菜单项通常由一个<a>元素来定义链接。

<ul id="menu">
  <li><a href="#">主菜单项</a></li>
  <li><a href="#">有子菜单的菜单项</a>
    <ul>
      <li><a href="#">子菜单项 1</a></li>
      <li><a href="#">子菜单项 2</a></li>
      <li><a href="#">子菜单项 3</a></li>
    </ul>
  </li>
  <li><a href="#">主菜单项 2</a></li>
</ul>

CSS 样式

接下来，我们需要使用CSS来为菜单设置基本样式，包括字体、颜色、边框等。同时，我们还需要利用CSS定位属性来实现弹出式菜单的效果，并使用选择器来改变菜单项在不同状态下的样式。

#menu {
  position: relative;
}

#menu li {
  display: inline-block;
  list-style-type: none;
}

#menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

#menu li ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  min-width: 150px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  background-color: #f9f9f9;
}

#menu li:hover ul {
  display: block;
}

JavaScript 行为

最后，我们使用JavaScript来实现菜单的交互行为。这包括点击或悬停时弹出子菜单，以及检测屏幕尺寸并调整菜单以适应不同设备。

// 获取所有菜单项
var menuItems = document.querySelectorAll("#menu li");

// 循环菜单项
for (var i = 0; i < menuItems.length; i++) {
  // 为每个菜单项添加事件监听器
  menuItems[i].addEventListener("click", function(e) {
    // 阻止默认行为
    e.preventDefault();

    // 获取当前菜单项的子菜单
    var subMenu = this.querySelector("ul");

    // 如果子菜单是可见的，则隐藏它
    if (subMenu.style.display === "block") {
      subMenu.style.display = "none";
    }
    // 否则，显示它
    else {
      subMenu.style.display = "block";
    }
  });
}