构建 Tailwind CSS 下拉菜单

Source: Dev.to

在本教程中，我们将使用 Tailwind CSS 构建一个简单的下拉菜单。我们采用 无 JavaScript 的方式，灵感来源于 DaisyUI，以便它能在任何项目设置中使用。

前置条件

在开始之前，请确保在项目中已设置 Tailwind CSS。如果需要帮助，请查看 Tailwind CSS 安装指南。

第一步：创建触发按钮

首先，创建一个简单的按钮。这就是用户点击后会打开下拉菜单的触发元素。

Dropdown

可选: 为了更直观地看到我们正在构建的内容，可将以下样式添加到 CSS 文件中，使页面上的所有内容居中显示：

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

第 2 步：为触发按钮添加样式

现在让它看起来像一个正式的按钮，带有边框、内边距和悬停效果。

  Dropdown

第 3 步：创建菜单

接下来，我们将添加实际的菜单并包含一些链接。我们还会将菜单和触发器包装在一个相对定位的容器中，以便以后可以相对于触发器定位菜单。

  Dropdown

  
    Item One
    Item Two
    Item Three
  

第 4 步：为菜单设置样式并定位

让我们为菜单添加样式，并将其定位在按钮下方。

  Dropdown

  
    Item One
    Item Two
    Item Three
  

第5步：为菜单项设置样式

现在我们将为菜单项提供一致的外观。

  Dropdown

  
    
      Item One
    
    Item Two
    Item Three
  

所有菜单项使用相同的类；这里只展示了一个示例以简洁。

第 6 步：使其交互

我们默认隐藏菜单，并在按钮获得焦点（点击）时显示它。这通过 Tailwind 的 group 和 focus-within 实用程序实现，允许组内的任何子元素在任意子元素获得焦点时改变样式。

  
    Dropdown
  

  
    Item One
    Item Two
    Item Three
  

（... 占位符代表前面步骤中已经定义的类。）

最终效果

当你把所有内容组合在一起时，就会得到一个完全可用、仅使用 Tailwind 的下拉菜单，聚焦时打开，失去焦点时关闭。

随意尝试修改类，以自定义颜色、间距或过渡效果，使其匹配你的设计系统。祝编码愉快！

整理后的 Markdown

  
    Dropdown
  

  
    Item One
    Item Two
    Item Three
  

正在发生什么？

• 在包装器上使用 group 使子元素能够使用 group-* 变体。
• opacity-0 让菜单不可见。
• pointer-events-none 防止点击不可见的项目。
• transition-opacity 添加细腻的淡入淡出动画。
• group-focus-within:opacity-100 当按钮获得焦点/被点击时显示菜单。
• group-focus-within:pointer-events-auto 当菜单可见时允许点击。
• group-focus-within:pointer-events-none 允许再次点击按钮以关闭菜单。

演示 GIF

完整代码（复制粘贴）

  
    Dropdown
  

  
    Item One
    Item Two
    Item Three
  

使用 Starting Point UI

如果您想节省时间，Starting Point UI 提供了许多预构建的组件，例如下拉菜单，并具备键盘导航、更好的可访问性以及灵活的定位等额外功能。

  Dropdown

  
    Item One
    Item Two
    Item Three
  

查看更多 此处的下拉示例.