本文へスキップ

ドキュメント

ドロップダウン

トグル可能なドロップダウンに異なるスタイルを定義します。

Dropdownコンポーネントは、エイム認識機能を備えています。これは、マウスポインタがドロップダウンに向かって移動している限り、ドロップダウンが開いた状態を維持することを意味します。追加の遅延により、マウスポインタが短時間別の方向に移動した場合でも、ドロップダウンが開いた状態を維持します。別のメニュー項目にカーソルが置かれると、ドロップダウンはすぐに閉じます。

使用方法

ドロップダウンは、独自のスタイルを提供するdropの例です。ボタンなどの任意のコンテンツでドロップダウンを切り替えることができます。 トグルの後に続くブロック要素にuk-dropdown属性を追加するだけです。

<button type="button"></button>
<div uk-dropdown></div>

ドロップダウンは、トグルにカーソルを合わせてクリックすることで有効にすることができます。クリックモードのみを強制するには、属性にmode: clickオプションを追加するだけです。トグルとドロップダウンをグループ化したい場合は、Utilityコンポーネントの.uk-inlineクラスを両方を囲むコンテナ要素に追加するだけです。

<div class="uk-inline">
    <button type="button"></button>
    <div uk-dropdown="mode: click"></div>
</div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Hover</button>
    <div uk-dropdown>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Click</button>
    <div uk-dropdown="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

ドロップダウンには、Navコンポーネントからのナビゲーションを含めることができます。<ul>要素に.uk-navクラスと.uk-dropdown-nav修飾子を追加するだけです。

<button type="button"></button>
<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">…</ul>
</div>
  • <button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

幅とグリッド

Gridコンポーネントをドロップダウン内に配置できます。コンテンツを<div>要素でラップし、uk-grid属性を追加するだけです。ドロップダウンがコンテナに収まらなくなったときにグリッドが自動的にスタックされるようにするには、.uk-drop-gridクラスを追加するだけです。

<div class="uk-width-large" uk-dropdown>
    <div class="uk-drop-grid uk-child-width-1-2@m" uk-grid>…</div>
</div>

Widthコンポーネントのクラスのいずれかを使用して、ドロップダウンの幅を調整します。

  • <button class="uk-button uk-button-default" type="button">Hover</button>
<div class="uk-width-large" uk-dropdown>
    <div class="uk-drop-grid uk-child-width-1-2@m" uk-grid>
        <div>
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
        <div>
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </div>
</div>

ラージ修飾子

パディングの大きいドロップダウンには、.uk-dropdown-largeクラスを追加します。

<div class="uk-dropdown-large" uk-dropdown></div>
  • <div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Large</button>
    <div class="uk-dropdown-large" uk-dropdown>
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

位置

デフォルトでは、ドロップダウンはトグルの下に配置されます。位置を変更するには、uk-dropdown属性にposオプションを設定します。値の最初の部分は、ドロップダウンが配置される側を示し、2番目の部分はトグルとの位置合わせを定義します。

位置 説明
top-left ドロップダウンをトグルの上に配置し、左側に揃えます。
top-center ドロップダウンをトグルの上に配置し、中央に揃えます。
top-right ドロップダウンをトグルの上に配置し、右側に揃えます。
bottom-left ドロップダウンをトグルの下に配置し、左側に揃えます。
bottom-center ドロップダウンをトグルの下に配置し、中央に揃えます。
bottom-right ドロップダウンをトグルの下に配置し、右側に揃えます。
left-top ドロップダウンをトグルの左側に配置し、上部に揃えます。
left-center ドロップダウンをトグルの左側に配置し、中央に揃えます。
left-bottom ドロップダウンをトグルの左側に配置し、下部に揃えます。
right-top ドロップダウンをトグルの右側に配置し、上部に揃えます。
right-center ドロップダウンをトグルの右側に配置し、中央に揃えます。
right-bottom ドロップダウンをトグルの右側に配置し、下部に揃えます。 
<div uk-dropdown="pos: top-left"></div>
  • <div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Top Right</button>
    <div uk-dropdown="pos: top-right">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Bottom Center</button>
    <div uk-dropdown="pos: bottom-center">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Right Top</button>
    <div uk-dropdown="pos: right-top">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

境界

デフォルトでは、ドロップダウンはビューポートまたは他の親スクロール祖先を超えた場合に自動的に位置を変更します。トグルを覆うのを防ぐために、反対側に位置を切り替え、ビューポートに収まるように位置合わせをシフトします。スクロール祖先以外の境界を設定するには、境界のセレクタを使用してboundary: SELECTORオプションをuk-dropdown属性に追加するだけです。

<div class="my-class">
    <button type="button"></button>
    <div uk-dropdown="boundary: !.my-class"></div>
</div>
  • <div class="boundary uk-panel uk-placeholder uk-height-medium">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Right</button>
    <div uk-dropdown="pos: bottom-right; boundary: !.boundary">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Left</button>
    <div uk-dropdown="pos: bottom-left; boundary: !.boundary">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

</div>

シフトとフリップ

自動シフトとフリップを無効にするには、uk-dropdown属性にshift: falseまたはflip: falseオプションを追加します。

<div uk-dropdown="shift: false; flip: false"></div>
  • <div class="boundary uk-panel uk-placeholder uk-height-medium">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Right</button>
    <div uk-dropdown="pos: bottom-right; boundary: !.boundary; shift: false; flip: false">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Left</button>
    <div uk-dropdown="pos: bottom-left; boundary: !.boundary; shift: false; flip: false">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

</div>

自動更新

デフォルトでは、スクロール時にドロップが再配置されます。動的な配置を無効にするには、uk-dropdown属性にauto-update: falseオプションを追加します。ドロップダウンは、開かれたときにのみ一度配置されます。

<div uk-dropdown="auto-update: false"></div>

ターゲット

デフォルトでは、ドロップダウンはトグルに合わせられます。ドロップダウンを別の要素に配置するには、target: SELECTORオプションをuk-dropdown属性に追加するだけです。ドロップダウンが配置される側または別の要素への位置合わせを変更するには、target-x: SELECTORまたはtarget-y: SELECTORを使用します。

<div class="my-class">
    <button type="button"></button>
    <div uk-dropdown="target: !.my-class"></div>
</div>
  • <div class="target uk-panel uk-placeholder uk-height-medium">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Left</button>
    <div uk-dropdown="pos: bottom-left; target: !.target">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Right</button>
    <div uk-dropdown="pos: bottom-right; target: !.target">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

</div>

インセット

デフォルトでは、ドロップダウンはトグルの外側に配置されます。位置を内側に変更するには、uk-dropdown属性にinset: trueオプションを追加します。このオプションは、ドロップダウンがトグルを覆わないように、targetオプションも設定されている場合にのみ使用してください。

<div uk-dropdown="target: .my-class; inset: true"></div>
  • <div class="target uk-panel uk-placeholder uk-height-large">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Left</button>
    <div uk-dropdown="pos: bottom-left; target: !.target; inset: true">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Right</button>
    <div uk-dropdown="pos: bottom-right; target: !.target; inset: true">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

</div>

ストレッチ

ドロップダウンを最も近いスクロール祖先のサイズに合わせてストレッチするには、uk-dropdown属性にstretch: trueオプションを追加します。片方の軸のみにストレッチするには、stretch: xまたはstretch: yを使用します。boundaryオプションが設定されている場合、ドロップダウンは定義された境界までストレッチします。

<div uk-dropdown="stretch: true"></div>
  • <nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li>
                <a href>Hover</a>
                <div class="uk-navbar-dropdown" uk-dropdown="boundary: !.uk-navbar; stretch: x; flip: false">
                    <ul class="uk-nav uk-dropdown-nav">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li class="uk-nav-header">Header</li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li class="uk-nav-divider"></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </div>
            </li>
        </ul>

    </div>
</nav>

アニメーション

Animationコンポーネントのクラスのいずれかを使用して、animation: uk-animation-*オプションを追加することで、ドロップダウンに1つ以上のアニメーションを適用できます。アニメーションの期間も決定できます。ミリ秒単位の値でdurationオプションを追加するだけです。ドロップを閉じるときにもアニメーションを表示するには、animate-out: trueを設定します。

<div uk-dropdown="animation: uk-animation-slide-top-small; duration: 1000"></div>
  • <button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown="animation: uk-animation-slide-top-small; animate-out: true">
    <ul class="uk-nav uk-dropdown-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

あるいは、Dropコンポーネントには、Animationコンポーネントではカバーされていない2つの追加のアニメーションタイプがあります。slide-*アニメーションは、選択した方向からドロップダウンとそのコンテンツをスライドさせ、reveal-*アニメーションでは、ドロップダウンのコンテンツは静的なまま、選択した方向から表示されます。

アニメーション 説明
slide-top ドロップダウンを上からスライドさせます。
slide-bottom ドロップダウンを下からスライドさせます。
slide-left ドロップダウンを左からスライドさせます。
slide-right ドロップダウンを右からスライドさせます。
reveal-top ドロップダウンを上から表示します。
reveal-bottom ドロップダウンを下から表示します。
reveal-left ドロップダウンを左から表示します。
reveal-right ドロップダウンを右から表示します。 
<div uk-dropdown="animation: slide-top; animate-out: true"></div>
  • <div class="uk-margin" uk-margin>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Slide Top</button>
        <div uk-dropdown="animation: slide-top; animate-out: true; duration: 700">
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </div>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Reveal Top</button>
        <div uk-dropdown="animation: reveal-top; animate-out: true; duration: 700">
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </div>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Slide Left</button>
        <div uk-dropdown="animation: slide-left; animate-out: true; duration: 700">
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </div>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Reveal Left</button>
        <div uk-dropdown="animation: reveal-left; animate-out: true; duration: 700">
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </div>

</div>

オフセット

ドロップダウンとそのトグル間のカスタムオフセットを定義するには、ピクセル単位の値でoffsetオプションを追加します。

<div uk-dropdown="offset: 80"></div>
  • <button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown="offset: 80">
    <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
</div>

コンポーネントオプション

これらのオプションは、コンポーネント属性に適用できます。複数のオプションをセミコロンで区切ります。詳細はこちら

オプション 値 デフォルト 説明
toggle CSSセレクタ - * トグルとして使用する要素のCSSセレクタ。デフォルトでは、前の要素。
pos 文字列 bottom-left ドロップの位置。
stretch ブール値、文字列 false 両方の軸（true）または指定された軸（x、y）でドロップダウンをストレッチします。
mode 文字列 click, hover ドロップダウントリガー動作モードのコンマ区切りリスト（click、hover）。
delay-show 数値 0 ホバーモードでドロップダウンが表示されるまでの遅延時間（ミリ秒）。
delay-hide 数値 800 ホバーモードでドロップダウンが非表示になるまでの遅延時間（ミリ秒）。
auto-update ブール値 true このオプションをfalseに設定することで、スクロール中の動的な配置を無効にします。
boundary CSSセレクタ false ドロップダウンが超えることができず、フリップとシフトを引き起こす領域。デフォルトでは、最も近いスクロール祖先。
boundary-x CSSセレクタ false ドロップが超えることができず、フリップとシフトを引き起こすx軸上の領域。
boundary-y CSSセレクタ false ドロップが超えることができず、フリップとシフトを引き起こすy軸上の領域。
target ブール値、CSSセレクタ false ドロップダウンが配置される要素（ウィンドウの場合はtrue）。
target-x ブール値、CSSセレクタ false ドロップダウンが配置される要素のX軸（ウィンドウの場合はtrue）。
target-y ブール値、CSSセレクタ false ドロップダウンの位置合わせを行う要素のY軸（ウィンドウの場合はtrue）。
inset ブール値 false ターゲット内での位置。
flip ブール値 true 境界を超えた場合、ドロップダウンを主軸に反転します。
shift ブール値 true 境界を超えた場合、ドロップダウンを交差軸に沿ってシフトします。
offset 数値 0 ドロップダウンのオフセット。
animation 文字列 uk-animation-fade アニメーションの名前をスペース区切りで指定します。閉じるアニメーションにはカンマ区切りを使用します。
animate-out ブール値 false ドロップダウンを閉じる際にアニメーションを使用します。
bg-scroll ブール値 true ドロップダウンが開いている間、背景スクロールを許可します。
close-on-scroll ブール値 false 親スクロールコンテナをスクロールした際にドロップダウンを閉じます。
duration 数値 200 アニメーションの期間。
container ブール値 false セレクターを使用してターゲットコンテナを定義し、DOM内にドロップダウンを追加する場所を指定します。

posは主要なオプションであり、属性値内の唯一のオプションの場合はキーを省略できます。

<span uk-dropdown="top-left"></span>

JavaScript

JavaScriptコンポーネントの詳細については、こちらをご覧ください。

初期化

UIkit.dropdown(element, options);

イベント

このコンポーネントがアタッチされた要素で、以下のイベントがトリガーされます。

名前 説明
toggle アイテムの切り替え前に発生します。
beforeshow アイテムが表示される前に発生します。イベントに対してpreventDefault()を呼び出すことで、表示を阻止できます。
show アイテムが表示された後に発生します。
shown アイテムの表示アニメーションが完了した後に発生します。
beforehide アイテムが非表示になる前に発生します。イベントに対してpreventDefault()を呼び出すことで、非表示を阻止できます。
hide アイテムが非表示になる前に発生します。
hidden アイテムが非表示になった後に発生します。
stack drop-stackクラスが適用されたときに発生します。

メソッド

このコンポーネントには、以下のメソッドを使用できます。

Show

UIkit.dropdown(element).show();

ドロップダウンを表示します。

Hide

UIkit.dropdown(element).hide(delay);

ドロップダウンを非表示にします。

名前 タイプ デフォルト 説明
delay ブール値 true ドロップダウンの非表示を遅らせます。

アクセシビリティ

ドロップダウンコンポーネントはメニューボタンWAI-ARIAデザインパターンに準拠しており、適切なWAI-ARIAロール、状態、プロパティを自動的に設定します。

キーボード操作

ドロップダウンコンポーネントは、以下のキーを使用してキーボードからアクセスできます。