基础 CSS 厨房水槽下拉窗格(1)

📌 相关文章

📜 基础 CSS 厨房水槽下拉窗格(1)

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

基础 CSS 厨房水槽下拉窗格

本文将介绍一个基于 CSS 的厨房水槽下拉窗格，它可以用于展示选项或者表单。该下拉窗格具有易用性和简单的设计。下面我们来看一下这个下拉窗格的样式和功能。

样式

该下拉窗格基于 CSS 实现，可以根据需要进行自定义。

主要样式包括：

容器（container）：该容器包裹着文本和下拉箭头。
触发器（trigger）：下拉箭头。
下拉菜单（dropdown）：下拉菜单容器。
菜单项（item）：下拉菜单中的每一项。

可以使用 CSS 修改默认样式或者添加新的样式。

功能

该下拉窗格有一个简单的功能：当用户点击下拉箭头时，下拉菜单会展开，当用户在下拉菜单中选中一个选项时，菜单会关闭，并把选中的选项显示在触发器中。

该下拉菜单可以用于展示选项或者表单，具有良好的易用性和友好的界面。

使用方式

为了使用该下拉窗格，需要在 HTML 文档中引入 CSS 文件，并按照下面的结构编写 HTML 代码：

<div class="container">
  <div class="trigger">
    <span>请选择一个选项</span>
    <img src="down-arrow.png" alt="下拉箭头">
  </div>
  <div class="dropdown">
    <div class="item">选项 1</div>
    <div class="item">选项 2</div>
    <div class="item">选项 3</div>
  </div>
</div>

该结构包含一个容器（.container）、一个触发器（.trigger）和一个下拉菜单（.dropdown）。容器包裹着触发器和下拉菜单。

下拉菜单中的每一项都被包裹在一个 div 元素中，且具有类名（.item）。

示例代码

下面是一个示例演示了如何使用该下拉窗格：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>基础 CSS 厨房水槽下拉窗格</title>
  <link rel="stylesheet" href="dropdown.css">
  <style>
    .container {
      margin: 40px auto;
      width: 300px;
    }
    .trigger {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      border: 1px solid #666;
      border-radius: 4px;
      padding: 10px;
      cursor: pointer;
    }
    .trigger:hover,
    .trigger:focus {
      background-color: #f5f5f5;
    }
    .trigger img {
      width: 20px;
      height: 20px;
    }
    .dropdown {
      position: absolute;
      top: 40px;
      left: 0;
      width: 100%;
      background-color: #fff;
      border: 1px solid #666;
      border-top: none;
      border-radius: 0 0 4px 4px;
      overflow: hidden;
      display: none;
    }
    .item {
      padding: 10px;
      cursor: pointer;
    }
    .item:hover {
      background-color: #f5f5f5;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="trigger">
      <span>请选择一个选项</span>
      <img src="down-arrow.png" alt="下拉箭头">
    </div>
    <div class="dropdown">
      <div class="item">选项 1</div>
      <div class="item">选项 2</div>
      <div class="item">选项 3</div>
    </div>
  </div>
  <script>
    let trigger = document.querySelector('.trigger');
    let dropdown = document.querySelector('.dropdown');
    let items = document.querySelectorAll('.item');
    trigger.addEventListener('click', function() {
      dropdown.style.display = dropdown.style.display === 'none' ? 'block': 'none';
    });
    items.forEach(item => {
      item.addEventListener('click', function() {
        trigger.children[0].textContent = item.textContent;
        dropdown.style.display = 'none';
      });
    });
  </script>
</body>
</html>

总结

该基础 CSS 厨房水槽下拉窗格是一个简单易用的工具，可以用于展示选项或者表单。如果需要更复杂的样式或者功能，可以根据自己的需求进行修改。