下拉菜单(Dropdown)

一个用于发现内容的可互动下拉菜单(dropdown menu)

dropdown 组件是包含了一个 dropdown 按钮和一个 dropdown 菜单的容器。

  • dropdown容器
    • dropdown-triggerbutton 的容器
    • dropdown-menu 是切换菜单组件,默认隐藏
      • dropdown-content 下来菜单的盒子,由白背景和阴影
        • dropdown-item 是下来菜单的单个项目,既可以是 a 也可以是 div 元素
        • dropdown-divider 分给或分组下拉菜单项目的 水平线

HTML

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</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">
        Dropdown item
      </a>
      <a class="dropdown-item">
        Other dropdown item
      </a>
      <a href="#" class="dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" class="dropdown-item">
        Other dropdown item
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        With a divider
      </a>
    </div>
  </div>
</div>

dropdown-item可以使用锚点(anchor)链接 <a> 或者使用 <div>,然后插入任何类型的内容

示例

HTML

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
      <span>Content</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-menu2" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
      </div>
      <hr class="dropdown-divider">
      <div class="dropdown-item">
        <p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
      </div>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        This is a link
      </a>
    </div>
  </div>
</div>

可悬停或者切换 #

dropdown 组件有 2 个扩展修饰符

  • is-hoverable:dropdown 当 (悬停)hovering 是触发 dropdown-trigger 显示下拉菜单
  • is-active:下来菜单全时始终显示

CSS :hover 扩展也能很好运行, is-active 类只是为了那些想要通过 JavaScript 控制下来菜单显示的用户而准备的。

HTML

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
      <span>Click me</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-menu3" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Overview
      </a>
      <a href="#" class="dropdown-item">
        Modifiers
      </a>
      <a href="#" class="dropdown-item">
        Grid
      </a>
      <a href="#" class="dropdown-item">
        Form
      </a>
      <a href="#" class="dropdown-item">
        Elements
      </a>
      <a href="#" class="dropdown-item">
        Components
      </a>
      <a href="#" class="dropdown-item">
        Layout
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        More
      </a>
    </div>
  </div>
</div>

示例

HTML

<div class="dropdown is-hoverable">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
      <span>Hover me</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-menu4" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
      </div>
    </div>
  </div>
</div>

向右对齐 #

您可以添加 is-right 修饰符,就拥有了一个(右对齐)right-aligned 的 dropdown。

示例

HTML

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu5">
      <span>Left aligned</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-menu5" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>The dropdown is <strong>left-aligned</strong> by default.</p>
      </div>
    </div>
  </div>
</div>

示例

HTML

<div class="dropdown is-right is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu6">
      <span>Right aligned</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-menu6" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>Add the <code>is-right</code> modifier for a <strong>right-aligned</strong> dropdown.</p>
      </div>
    </div>
  </div>
</div>

上拉菜单(Dropup) #

您可以添加 is-up 修饰符是下拉菜单成上拉菜单。

示例

HTML

<div class="dropdown is-up">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu7">
      <span>Dropup button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-up" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu7" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.</p>
      </div>
    </div>
  </div>
</div>

Variables #

Name
Type
Value
Computed Value
Computed Type
$dropdown-menu-min-width
size
12rem
$dropdown-content-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$dropdown-content-arrow
variable
$link
hsl(229, 53%,  53%)
color
$dropdown-content-offset
size
4px
$dropdown-content-padding-bottom
size
0.5rem
$dropdown-content-padding-top
size
0.5rem
$dropdown-content-radius
variable
$radius
4px
size
$dropdown-content-shadow
variable
$shadow
0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
shadow
$dropdown-content-z
string
20
$dropdown-item-color
variable
$text
hsl(0, 0%, 29%)
color
$dropdown-item-hover-color
variable
$scheme-invert
hsl(0, 0%, 4%)
color
$dropdown-item-hover-background-color
variable
$background
hsl(0, 0%, 96%)
color
$dropdown-item-active-color
variable
$link-invert
#fff
color
$dropdown-item-active-background-color
variable
$link
hsl(229, 53%,  53%)
color
$dropdown-divider-background-color
variable
$border-light
hsl(0, 0%, 93%)
color

Made with Bulma 此页面为开放源码页面。 发现排版问题?或者表达模糊?
在 GitHub 改进该页内容

#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布!