ドロップナビゲーション
任意のナビゲーションにドロップダウンメニューを作成します。
Dropnavコンポーネントは、ナビゲーション内のすべてのドロップダウンを同じオプションで初期化するため、個別に初期化する必要はありません。Dropnav内のすべてのドロップダウンは、マウスポインタ感知機能を備えています。これは、マウスポインタがドロップダウンの方向に移動している限り、ドロップダウンが開いたままになることを意味します。追加の遅延により、マウスポインタが短時間別の方向に移動した場合でも、ドロップダウンが開いたままになります。ホバーモードでは、別のメニュー項目にホバーすると、ドロップダウンはすぐに閉じます。
使用方法
Dropnavコンポーネントは、いくつかのトグルとその関連するドロップダウンで構成されています。トグルを含むリスト要素、またはその親コンテナ要素に`uk-dropnav`属性を追加します。ドロップダウンに`.uk-dropdown`クラスを、ドロップダウン内のナビゲーションに`.uk-dropdown-nav`クラスを追加することで、ドロップダウンコンポーネントを使用します。
Dropnavトグルは、他のコンポーネントによってスタイル設定され、そのいくつかはここで説明します。
<ul uk-dropnav>
<li>
<a href=""></a>
<div class="uk-dropdown">
<ul class="uk-nav uk-dropdown-nav">…</ul>
</div>
</li>
</ul>この例では、サブナビゲーションコンポーネントを使用しています。
<nav uk-dropnav> <ul class="uk-subnav"> <li class="uk-active"><a href="#">Active</a></li> <li> <a href>Parent <span uk-drop-parent-icon></span></a> <div class="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><a href="#">Item</a></li> </ul> </div> </li> <li> <a href>Parent <span uk-drop-parent-icon></span></a> <div class="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><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul> </nav>
ドロップバー
ドロップバーはドロップナビゲーションの全幅に拡張され、デフォルトのスタイルなしでドロップダウンを表示します。ドロップダウンをこのようなドロップバー内に配置するには、`uk-dropnav`に`dropbar: true`オプションを追加します。オプションとして、`dropbar-anchor`オプションを使用して、ドロップバーをマークアップのどの要素の後に挿入するかを選択します。
<nav uk-dropnav="dropbar: true">…</nav><nav uk-dropnav="dropbar: true"> <ul class="uk-subnav"> <li class="uk-active"><a href="#">Active</a></li> <li> <a href>Item</a> <div class="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> </li> <li> <a href>Item</a> <div class="uk-dropdown uk-width-large"> <div class="uk-child-width-1-2" 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> </li> </ul> </nav>
クリックモード
ドロップナビゲーション内の親アイテムは、トグルにホバーするかクリックすることで有効にできます。`uk-dropnav`属性に`mode: click`オプションを追加するだけです。
<nav uk-dropnav="mode: click">…</nav><nav uk-dropnav="mode: click"> <ul class="uk-subnav"> <li class="uk-active"><a href="#">Active</a></li> <li> <a href>Parent <span uk-drop-parent-icon></span></a> <div class="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><a href="#">Item</a></li> </ul> </div> </li> <li> <a href>Parent <span uk-drop-parent-icon></span></a> <div class="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><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul> </nav>
配置
デフォルトでは、ドロップダウンはドロップバーアイテムの下に配置され、左側に配置されます。配置を変更するには、`uk-dropbar`属性に`align`オプションを設定します。
| 位置 | 説明 |
|---|---|
左 |
ドロップダウンを左側に配置します。 |
右 |
ドロップダウンを右側に配置します。 |
中央 |
ドロップダウンを中央に配置します。 |
<nav uk-dropbar="align: center">…</nav><nav uk-dropnav="align: center"> <ul class="uk-subnav uk-flex-center"> <li class="uk-active"><a href="#">Active</a></li> <li> <a href>Parent <span uk-drop-parent-icon></span></a> <div class="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><a href="#">Item</a></li> </ul> </div> </li> <li> <a href>Parent <span uk-drop-parent-icon></span></a> <div class="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><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul> </nav>
ターゲット
デフォルトでは、ドロップダウンはトグルアイテムに配置されます。ドロップダウンを別の要素に配置するには、`uk-dropbar`属性に`target: SELECTOR`オプションを追加するだけです。
<nav uk-dropbar="target: !.uk-section">…</nav><div class="uk-section uk-section-muted uk-section-small"> <nav uk-dropnav="target: !.uk-section; align: center"> <ul class="uk-subnav"> <li class="uk-active"><a href="#">Active</a></li> <li> <a href>Parent</a> <div class="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> </li> <li> <a href>Parent</a> <div class="uk-dropdown uk-width-large"> <div class="uk-child-width-1-2" 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> </li> </ul> </nav> </div>
ストレッチ
ドロップコンポーネントとその`stretch`オプションを使用してドロップダウンをストレッチします。次の例では、ドロップダウンはドロップナビゲーションの境界に配置されます。
<nav uk-dropnav="boundary: true; stretch: x; flip: false">…</nav><nav uk-dropnav="boundary: true; stretch: x; flip: false"> <ul class="uk-subnav"> <li class="uk-active"><a href="#">Active</a></li> <li> <a href>Parent</a> <div class="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> </li> <li> <a href>Parent</a> <div class="uk-dropdown"> <div class="uk-child-width-1-2" 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> </li> </ul> </nav>
親アイコン
親アイコンを作成するには、ドロップコンポーネントを使用し、``要素に`uk-drop-parent-icon`属性を追加します。
<ul uk-dropnav>
<li>
<a href="">Parent <span uk-drop-parent-icon></span></a>
<div class="uk-dropdown">…</div>
</li>
</ul><nav uk-dropnav> <ul class="uk-subnav"> <li class="uk-active"><a href="#">Active</a></li> <li> <a href>Parent <span uk-drop-parent-icon></span></a> <div class="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><a href="#">Item</a></li> </ul> </div> </li> <li> <a href>Parent <span uk-drop-parent-icon></span></a> <div class="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><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul> </nav>
ドロップナビゲーションとタブ
ドロップナビゲーションは、タブコンポーネントに簡単に適用できます。
<nav uk-dropnav>
<ul class="uk-tab">…</ul>
<nav><nav uk-dropnav> <ul class="uk-tab"> <li class="uk-active"><a href="#">Active</a></li> <li> <a href>Parent <span uk-drop-parent-icon></span></a> <div class="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><a href="#">Item</a></li> </ul> </div> </li> <li> <a href>Parent <span uk-drop-parent-icon></span></a> <div class="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><a href="#">Item</a></li> </ul> </div> </li> <li><a href="#">Item</a></li> </ul> </nav>
コンポーネントオプション
これらのオプションは、コンポーネント属性に適用できます。複数のオプションをセミコロンで区切ります。詳細はこちら
| オプション | 値 | デフォルト | 説明 |
|---|---|---|---|
align |
文字列 | 左 |
ドロップダウンの配置（`left`、`right`、`center`）。 |
dropbar |
ブール値 | false |
ドロップバーの動作を有効または無効にします。 |
dropbar-anchor |
CSSセレクタ | false |
設定されている場合、ドロップバーはアンカー要素の後に挿入されます。 |
stretch |
ブール値、文字列 | false |
両方の軸（true）または指定された軸（`x`、`y`）でドロップダウンをストレッチします。 |
mode |
文字列 | click, hover |
ドロップダウンのトリガー動作モードのカンマ区切りリスト（`click`、`hover`）。 |
delay-show |
数値 | 0 |
ホバーモードでドロップダウンが表示されるまでの遅延時間（ミリ秒）。 |
delay-hide |
数値 | 800 |
ホバーモードでドロップダウンが非表示になるまでの遅延時間（ミリ秒）。 |
boundary |
CSSセレクタ | true |
ドロップダウンが超えることができない領域で、反転とシフトを引き起こします。デフォルトでは、最も近いスクロール可能な祖先。 |
target |
ブール値、CSSセレクタ | false |
ドロップダウンが配置される要素（ウィンドウの場合は`true`）。 |
target-x |
ブール値、CSSセレクタ | false |
ドロップダウンが配置される要素のX軸（ウィンドウの場合は`true`）。 |
target-y |
ブール値、CSSセレクタ | false |
ドロップダウンが配置される要素のY軸（ウィンドウの場合は`true`）。 |
offset |
数値 | 0 |
ドロップダウンのオフセット。 |
animation |
文字列 | uk-animation-fade |
アニメーションの名前をスペース区切りで指定します。終了アニメーションの場合はカンマ区切り。 |
animate-out |
ブール値 | false |
ドロップを閉じるときにアニメーションを使用します。 |
bg-scroll |
ブール値 | true |
ドロップダウンが開いている間、背景のスクロールを許可します。 |
close-on-scroll |
ブール値 | false |
親スクロールコンテナをスクロールしたときにドロップを閉じます。 |
duration |
数値 | 200 |
アニメーションの期間。 |
container |
ブール値 | false |
セレクタを使用してターゲットコンテナを定義し、ドロップダウンをDOMのどこに付加するかを指定します。 |
JavaScript
JavaScriptコンポーネントの詳細については、こちらをご覧ください。
初期化
UIkit.dropnav(element, options);イベント
このコンポーネントがアタッチされた要素で、次のイベントがトリガーされます。
| 名前 | 説明 |
|---|---|
beforeshow |
アイテムが表示される前に発生します。イベントに`preventDefault()`を呼び出すことで、表示を阻止できます。 |
show |
アイテムが表示された後に発生します。 |
shown |
アイテムの表示アニメーションが完了した後に発生します。 |
beforehide |
アイテムが非表示になる前に発生します。イベントに`preventDefault()`を呼び出すことで、非表示を阻止できます。 |
hide |
アイテムの非表示アニメーションが開始した後に発生します。 |
hidden |
アイテムが非表示になった後に発生します。 |
アクセシビリティ
Dropnavコンポーネントは、Disclosure Navigation Menu WAI-ARIAデザインパターンに準拠し、適切なWAI-ARIA状態とプロパティを自動的に設定します。
- ナビゲーションアイテムとトグルアイテムには、`aria-expanded`状態と`aria-haspopup`プロパティがあります。
- トグルアイテムには、`aria-label`プロパティもあります。
キーボード操作
Dropnavコンポーネントは、次のキーを使用してキーボードからアクセスできます。
- tabキーまたはshift+tabキーは、ドロップナビゲーションの内外にフォーカスを置きます。
- 左右矢印キーは、ドロップナビゲーションアイテム間を移動します。ホバーモードでは、ドロップダウンが自動的に開きます。フォーカスが最後のアイテムにある場合、最初のアイテムに移動します。
- enterキーまたはspaceキーは、フォーカスされているドロップナビゲーションアイテムのドロップダウンを開閉します。
- 上下矢印キーは、ドロップダウン内のナビゲーションアイテム間を移動します。フォーカスが最後のアイテムにある場合、最初のアイテムに移動します。
- escキーは、フォーカスが別の要素に移動した場合でも、すべてのドロップダウンを閉じます。
国際化
トグルアイテムコンポーネントは、次の翻訳文字列を使用します。コンポーネントの翻訳の詳細については、こちらをご覧ください。
| キー | デフォルト | 説明 |
|---|---|---|
ラベル |
メニューを開く |
`aria-label`属性。 |