ダウンロード

スタート

機能

Sass ツール

カスタマイズ

CSS ライブラリー

CSSヘルパー

スポンサー

Password.link

ドロップダウン

検出可能なコンテンツ用対話型ドロップダウンメニュー

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はアンカーリンク<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つの追加のModifierがあります

  • is-hoverable: 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のModifierを追加して、右寄せのドロップダウンを作成できます。

例

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 modifierを追加して、ドロップダウンボタンの上にドロップダウンメニューが表示されるようにできます。

例

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>

Sass and CSS変数 #

Sass変数
CSS 変数
値(Value)
 
$dropdown-menu-min-width
 
var(--bulma-dropdown-menu-min-width)
 
12rem
 
$dropdown-content-background-color
 
var(--bulma-dropdown-content-background-color)
 
var(--bulma-scheme-main)
 
$dropdown-content-offset
 
var(--bulma-dropdown-content-offset)
 
0.25rem
 
$dropdown-content-padding-bottom
 
var(--bulma-dropdown-content-padding-bottom)
 
0.5rem
 
$dropdown-content-padding-top
 
var(--bulma-dropdown-content-padding-top)
 
0.5rem
 
$dropdown-content-radius
 
var(--bulma-dropdown-content-radius)
 
var(--bulma-radius)
 
$dropdown-content-shadow
 
var(--bulma-dropdown-content-shadow)
 
var(--bulma-shadow)
 
$dropdown-content-z
 
var(--bulma-dropdown-content-z)
 
20
 
$dropdown-divider-background-color
 
var(--bulma-dropdown-divider-background-color)
 
var(--bulma-border-weak)

Bulma をサポートする方法

一時金寄付

スポンサーをご覧ください

月額寄付

スポンサーになる
#native_company# #native_desc#
#native_cta#