📌  相关文章
📜  如何使用纯 CSS 设计下拉菜单？(1)

📅  最后修改于: 2023-12-03 15:24:01.897000             🧑  作者: Mango

如何使用纯 CSS 设计下拉菜单？

在网页设计中，下拉菜单是一个非常常见的元素。虽然使用JavaScript能够轻松地实现它，但是使用纯CSS设计下拉菜单，则可以使网页更轻量，页面加载得更快，也能更好地支持无障碍访问。

今天，我们将介绍如何使用纯CSS设计下拉菜单。以下是具体细节。

HTML结构

为了创建一个下拉菜单，我们需要在HTML中为其创建一个结构。通常，下拉菜单由一个父元素（通常是<div>或<nav>）和一个包含所有选项的子元素<ul>（无序清单）组成。每个选项都由一个包含菜单项文本的<li>元素表示。

例如，以下是下拉菜单的基本结构：

<div class="dropdown">
  <button class="dropdown-toggle">菜单</button>
  <ul class="dropdown-menu">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

在这个结构中，<button>元素是一个触发下拉菜单的按钮，而<ul>元素则包含所有的选项。

基本样式

首先，我们需要为下拉菜单定义一些基本样式。这些样式将用于位置和显示菜单。

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  background-color: #eee;
  color: #333;
  padding: 6px 10px;
  border: none;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  z-index: 1;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0;
  margin-top: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  display: none;
}

在上面的样式中，.dropdown元素被设置为相对定位，这是因为我们希望菜单可以相对于其父元素定位。.dropdown-toggle是触发下拉菜单的按钮，这里我们简单地定义了一些样式来显示按钮。.dropdown-menu是我们的下拉菜单本身，我们为其定义了基本样式，例如其位置（绝对定位）、阴影、边框等。

显示下拉菜单

现在，我们需要实现一个方法，以便在用户点击菜单按钮时显示菜单。可以使用CSS的 :hover 伪类来显示下拉菜单，但是这种方法不适用于小屏幕设备。因此，使用JavaScript来切换显示下拉菜单是更好的解决方案。在这里，我们使用一个简单的JavaScript方法来实现下拉菜单的显示和隐藏。

document.querySelector(".dropdown-toggle").addEventListener("click", function() {
  var dropdownMenu = document.querySelector(".dropdown-menu");
  if (dropdownMenu.style.display === "none") {
    dropdownMenu.style.display = "block";
  } else {
    dropdownMenu.style.display = "none";
  }
});

在上面的代码中，我们选择菜单按钮（.dropdown-toggle）并添加了一个click事件监听器。当用户单击按钮时，我们选择菜单（.dropdown-menu）并检查其当前的显示状态。如果菜单是隐藏的，则我们将其显示，否则我们将其隐藏。

显示选项

现在，我们需要为菜单中每个选项添加样式。我们将使用CSS选择器来为每个选项应用样式。

.dropdown-menu li {
  display: block;
  border-bottom: 1px solid #ccc;
}

.dropdown-menu li:last-child {
  border-bottom: none;
}

.dropdown-menu li a {
  display: block;
  padding: 6px 12px;
  color: #333;
  text-decoration: none;
}

.dropdown-menu li:hover {
  background-color: #f0f0f0;
}

在上面的样式中，我们为每个菜单项元素(li)添加了样式，例如创建选项的下边框和为菜单项设置背景色等。我们还使用了 :hover伪类来为用户鼠标移动到每个选项时设置样式。

完整代码

以下是实现下拉菜单的完整代码：

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown Menu Demo</title>
  <style>
    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-toggle {
      background-color: #eee;
      color: #333;
      padding: 6px 10px;
      border: none;
      border-radius: 3px;
      outline: none;
      cursor: pointer;
    }

    .dropdown-menu {
      position: absolute;
      z-index: 1;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 0;
      margin-top: 5px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      display: none;
    }

    .dropdown-menu li {
      display: block;
      border-bottom: 1px solid #ccc;
    }

    .dropdown-menu li:last-child {
      border-bottom: none;
    }

    .dropdown-menu li a {
      display: block;
      padding: 6px 12px;
      color: #333;
      text-decoration: none;
    }

    .dropdown-menu li:hover {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="dropdown">
    <button class="dropdown-toggle">菜单</button>
    <ul class="dropdown-menu">
      <li><a href="#">选项1</a></li>
      <li><a href="#">选项2</a></li>
      <li><a href="#">选项3</a></li>
    </ul>
  </div>

  <script>
    document.querySelector(".dropdown-toggle").addEventListener("click", function() {
      var dropdownMenu = document.querySelector(".dropdown-menu");
      if (dropdownMenu.style.display === "none") {
        dropdownMenu.style.display = "block";
      } else {
        dropdownMenu.style.display = "none";
      }
    });
  </script>
</body>
</html>
结论

通过使用上述代码和样式，我们已成功地创建了一个纯CSS下拉菜单。该菜单在大多数浏览器中都能良好地显示，而相关代码也很轻量，使得页面加载速度更快，更易于支持无障碍访问。此外，如果您需要更多的菜单选项，可以轻松地向下拉列表中添加更多的选项。