本文へスキップ

ドキュメント

ドロップバー

ドロップバーと呼ばれる、切り替え可能な全幅セクションを作成します。

ドロップバーコンポーネントは、ドロップコンポーネントに対してセクションのようなスタイルを提供します。ページ上のどこにでもスペースを空けて配置されるドロップダウンとは異なり、ドロップバーはビューポートの全幅または全高に広がるため、スペースなしで3辺に完全にフィットします。

ドロップバーコンポーネントは、目的意識を持っています。これは、マウスポインタがドロップバーに向かって移動している限り、ドロップバーが開いたままになることを意味します。追加の遅延により、マウスポインタが短時間別の方向に移動した場合でも、ドロップバーが開いたままになります。別のドロップバーが開かれると、ドロップバーはすぐに閉じます。

使用方法

このコンポーネントを適用するには、.uk-dropbarクラスを追加し、ドロップバーが表示される方向の修飾子クラス（例：.uk-dropbar-top）を追加します。

<div class="uk-dropbar uk-dropbar-top"></div>

さらに、ドロップバーにuk-drop属性と、その前にトグル要素を追加します。ボタンなどの任意のコンテンツがドロップコンポーネントを切り替えることができます。ドロップバーは視覚的にビューポートの全幅または全高に広がる必要があるため、uk-drop属性にstretch: trueオプションを追加します。1つの軸のみに広げるには、stretch: xまたはstretch: yを使用します。すべてのアニメーションの詳細については、ドロップコンポーネントを参照してください。

<button type="button"></button>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x"></div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • <div class="uk-overflow-auto uk-height-medium">
    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Hover</button>
        <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
</div>

ドロップバーは、通常ナビゲーションバーコンポーネントと共に使用されます。

  • <div class="uk-overflow-auto uk-height-medium">

    <nav class="uk-navbar-container">
        <div class="uk-container">
            <div uk-navbar>

                <div class="uk-navbar-left">

                    <ul class="uk-navbar-nav">
                        <li>
                            <a class="uk-navbar-toggle uk-navbar-toggle-animate" href uk-navbar-toggle-icon></a>
                            <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                        </li>
                    </ul>

                </div>

            </div>
        </div>
    </nav>

</div>

ナビゲーションバーコンポーネントとドロップナビゲーションコンポーネントには、複数のドロップバー専用のインプリメンテーションがあります。

方向

適切なドロップバースタイルを設定するには、次のいずれかの方向修飾子クラスを追加します。

方向 説明
uk-dropbar-top 上側からドロップバーを開きます。
uk-dropbar-bottom 下側からドロップバーを開きます。
uk-dropbar-left 左側からドロップバーを開きます。
uk-dropbar-right 右側からドロップバーを開きます。

ドロップコンポーネントのposとstretchオプションを使用して、特定の方向からドロップバーを開きます。

位置 説明
pos: top-left; stretch: x トグルの上にドロップバーを配置し、水平方向に広げます。
pos: bottom-left; stretch: x トグルの下にドロップバーを配置し、水平方向に広げます。
pos: left-top; stretch: y トグルの左側にドロップバーを配置し、垂直方向に広げます。
pos: right-top; stretch: y トグルの右側にドロップバーを配置し、垂直方向に広げます。 
<div class="uk-dropbar uk-dropbar-left" uk-drop="pos: left-top; stretch: y"></div>
  • <div class="uk-overflow-auto uk-height-medium">

    <nav class="uk-navbar-container">
        <div class="uk-container">
            <div uk-navbar>

                <div class="uk-navbar-left">

                    <ul class="uk-navbar-nav">
                        <li>
                            <a href>Top</a>
                            <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                        </li>
                        <li>
                            <a href>Left</a>
                            <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                        </li>
                        <li>
                            <a href>Right</a>
                            <div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y; target: !.uk-navbar-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                        </li>
                    </ul>

                </div>

            </div>
        </div>
    </nav>

</div>

アニメーション

ドロップバーをアニメーションさせるには、ドロップコンポーネントのslide-*またはreveal-*アニメーションを使用します。slide-*アニメーションは、選択した方向からドロップバーとそのコンテンツをスライドさせますが、reveal-*アニメーションでは、ドロップバーのコンテンツは静止したままで、選択した方向から表示されます。ドロップバーを閉じるときにもアニメーションを表示するには、animate-out: trueを設定します。

アニメーション 説明
slide-top 上側からドロップバーをスライドさせます。
slide-bottom 下側からドロップバーをスライドさせます。
slide-left 左側からドロップバーをスライドさせます。
slide-right 右側からドロップバーをスライドさせます。
reveal-top 上側からドロップバーを表示します。
reveal-bottom 下側からドロップバーを表示します。
reveal-left 左側からドロップバーを表示します。
reveal-right 右側からドロップバーを表示します。 
<div uk-drop="animation: slide-top; animate-out: true"></div>
  • <div class="uk-overflow-auto uk-height-medium">
    
    <nav class="uk-navbar-container">
        <div class="uk-container">
            <div uk-navbar>

                <div class="uk-navbar-left">

                    <ul class="uk-navbar-nav">
                        <li>
                            <a href>Slide Top</a>
                            <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container; animation: slide-top; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                        </li>
                        <li>
                            <a href>Reveal Top</a>
                            <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container; animation: reveal-top; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                        </li>
                        <li>
                            <a href>Slide Left</a>
                            <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container; animation: slide-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                        </li>
                        <li>
                            <a href>Reveal Left</a>
                            <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container; animation: reveal-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                        </li>
                        <li>
                            <a href>Slide Right</a>
                            <div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y;  target: !.uk-navbar-container; animation: slide-right; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                        </li>
                        <li>
                            <a href>Reveal Right</a>
                            <div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y;  target: !.uk-navbar-container; animation: reveal-right; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                        </li>
                    </ul>

                </div>

            </div>
        </div>
    </nav>

</div>

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

<button type="button"></button>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">
    <ul class="uk-nav uk-dropdown-nav">…</ul>
</div>
  • <div class="uk-overflow-auto uk-height-large">

    <nav class="uk-navbar-container">
        <div class="uk-container">
            <div uk-navbar>

                <div class="uk-navbar-left">

                    <ul class="uk-navbar-nav">
                        <li>
                            <a href>Hover</a>
                            <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">
                                <ul class="uk-nav uk-navbar-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>

            </div>
        </div>
    </nav>

</div>

ラージ修飾子

垂直方向のパディングが大きいドロップバーには、.uk-dropbar-largeクラスを追加します。

<div class="uk-dropbar uk-dropbar-top uk-dropbar-large" uk-drop="stretch: x"></div>
  • <div class="uk-overflow-auto uk-height-large">
    
    <nav class="uk-navbar-container">
        <div class="uk-container">
            <div uk-navbar>

                <div class="uk-navbar-left">

                    <ul class="uk-navbar-nav">
                        <li>
                            <a href>Hover</a>
                            <div class="uk-dropbar uk-dropbar-top uk-dropbar-large" uk-drop="stretch: x">
                                <ul class="uk-nav uk-navbar-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>

            </div>
        </div>
    </nav>

</div>

アクセシビリティ

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

キーボード操作

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