Foundation ドロップダウン

ドロップダウン・ボタン

ドロップダウンメニューは、ユーザーに定義済みリストから値を選択することを可能にするトグルメニューです：

• Link 1
• Link 2
• Link 3

例の説明

.dropdown クラスは、ボタンに "caret-down" アイコンを追加します。

ドロップダウンメニューを開くには、data-dropdown="id" 付きのボタンまたはリンクを使用します。

id の値は、ドロップダウンコンテンツ（id01）と一致する必要があります。

実際にドロップダウンメニュー/コンテンツを作るために、コンテナ要素： <ul>、<div> または <nav> に、 data-dropdown-content 属性と一緒に .f-dropdown クラスを追加します。 コンテナ要素の中の好きな場所にあらゆるものを配置します。

最後に、ドロップダウンが機能するように、foundation JS を初期化します。

注: 小型デバイスでは、すべてのドロップダウンは幅が全体を占め、且つ下揃えになります。

ドロップダウン・サイズ

ドロップダウンの幅を変更するには、.tiny、.small、.medium、.large または .mega を使用します。

注: 小型画面の幅は、デフォルトでは 100％ です。

ドロップダウンのパディング

ドロップダウンに特別なパディングを追加するには、.content クラスを追加します：

他の例

中にイメージを持つ特別なパディング付きの medium <div> ドロップダウン：

例

<a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>
<div id="id01" data-dropdown-content class="f-dropdown medium content">
  <h4>Paris Title</h4>
  <p>Some text.. some text..</p>
  <img src="paris.jpg" alt="Paris" width="400" height="300">
  <p>Paris, je t'aime.</p>
</div>

結果：

Dropdown Button

Paris Title

Some text.. some text..

Paris, je t'aime.

Try it Yourself »

ドロップダウンの方向

デフォルトでは、ドロップダウンはボックスの下部に配置されます。 位置を変更するには、data-options="align:left|right|top" を追加します：

ホバー可能なドロップダウン

デフォルトでは、ボタンをクリックしたときにドロップダウンが表示されます。マウスオーバー時に表示したいときは、 ボタン要素に data-options="is_hover:true" を追加します：

分離ボタン

分離したボタンで、ドロップダウン機能を使用することもできます。ただ、ボタンに .split クラスを追加し、 <span> 要素でドロップダウンボタン（矢印）を分離します：