Bulma 可悬停或可切换下拉菜单

Bulma 是一个基于 Flexbox 的现代 CSS 框架。它包含了许多有用的组件，包括可悬停或可切换下拉菜单。

可悬停下拉菜单

可悬停下拉菜单指的是鼠标悬停在某个元素上时才会展示的下拉菜单。

在 Bulma 中，我们可以使用 dropdown 类来创建可悬停下拉菜单。示例代码如下：

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>下拉菜单按钮</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        下拉菜单项 1
      </a>
      <a href="#" class="dropdown-item">
        下拉菜单项 2
      </a>
      <a href="#" class="dropdown-item">
        下拉菜单项 3
      </a>
    </div>
  </div>
</div>

在上述示例代码中，我们使用 dropdown 类来创建一个可悬停下拉菜单。其中，dropdown-trigger 类用于包裹触发下拉菜单的按钮，而 dropdown-menu 类则用于包裹菜单项。

在默认情况下，下拉菜单是不可见的。当鼠标悬停在按钮上时，下拉菜单才会展示。此时，下拉菜单的 CSS 属性为 visibility: hidden;，当鼠标悬停在按钮上时，属性则为 visibility: visible;。

可切换下拉菜单

可切换下拉菜单指的是点击某个元素时才会展示的下拉菜单。在 Bulma 中，我们可以使用 dropdown 和 is-active 类来创建可切换下拉菜单。

示例代码如下：

<div class="dropdown is-right">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>下拉菜单按钮</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        下拉菜单项 1
      </a>
      <a href="#" class="dropdown-item">
        下拉菜单项 2
      </a>
      <a href="#" class="dropdown-item">
        下拉菜单项 3
      </a>
    </div>
  </div>
</div>

在上述示例代码中，我们使用 dropdown 类来创建一个可切换下拉菜单。与之前的示例相比，我们添加了 is-right 类以使菜单右对齐。

当我们点击按钮时，下拉菜单的 CSS 属性为 visibility: visible; 和 display: block;，同时给菜单元素添加 is-active 类。

结束语

Bulma 是一个功能丰富的 CSS 框架，其中的可悬停或可切换下拉菜单让页面展示更加美观和易用，值得每个程序员了解和使用。