下拉菜单（Dropdown）
一个用于发现内容的可互动下拉菜单（dropdown menu）
dropdown 组件是包含了一个 dropdown 按钮和一个 dropdown 菜单的容器。
dropdown 是主容器
dropdown-trigger 是 button 的容器
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><div></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：下来菜单全时始终显示
示例
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>
您可以添加 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>$dropdown-menu-min-width12rem$dropdown-content-background-color$scheme-mainhsl(0, 0%, 100%)$dropdown-content-arrow$linkhsl(229, 53%, 53%)$dropdown-content-offset4px$dropdown-content-padding-bottom0.5rem$dropdown-content-padding-top0.5rem$dropdown-content-radius$radius4px$dropdown-content-shadow$shadow0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)$dropdown-content-z20$dropdown-item-color$texthsl(0, 0%, 29%)$dropdown-item-hover-color$scheme-inverthsl(0, 0%, 4%)$dropdown-item-hover-background-color$backgroundhsl(0, 0%, 96%)$dropdown-item-active-color$link-invert#fff$dropdown-item-active-background-color$linkhsl(229, 53%, 53%)$dropdown-divider-background-color$border-lighthsl(0, 0%, 93%)
此页面为开放源码页面。
发现排版问题？或者表达模糊？
在 GitHub 改进该页内容
