Foundation ドロップダウンメニュー

Foundation のドロップダウンメニューを使用すると、ユーザーは定義済みのドロップダウンリストから値を選択できます。

例

<!-- Trigger the Dropdown -->
<a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>

<!-- Dropdown content -->
<ul id="id01" data-dropdown-content class="f-dropdown">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

試してみる »

例の解析

.dropdownクラスは、ボタンに下向きの矢印記号「アイコン」を追加します。

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

id値はドロップダウンメニューのコンテンツ (id01) と一致する必要があります。

<div>、<nav> に<ul>追加し.f-dropdownクラスとdata-dropdown-content属性を使用してドロップダウンメニューのコンテンツを作成します。

最後に Foundation JS を初期化します。

注意:小さい画面では、すべてのドロップダウンメニューの幅は100%です。

ドロップダウンメニューのサイズ

を使用して.tiny, .small, .medium, .large 或 .megaドロップダウンメニューの幅を変更します。

注意:小さい画面では、すべてのドロップダウンメニューの幅は100%です。

例

<!-- Tiny Dropdown: max-width is 200px -->
<ul id="id01" data-dropdown-content class="f-dropdown tiny">..

<!-- Small Dropdown: max-width is 300px -->
<ul id="id02" data-dropdown-content class="f-dropdown small">..

<!-- Medium Dropdown: max-width is 500px -->
<ul id="id03" data-dropdown-content class="f-dropdown medium">

<!-- Large Dropdown: max-width is 800px -->
<ul id="id04" data-dropdown-content class="f-dropdown large">..

<!-- Mega Dropdown: 100% width -->
<ul id="id04" data-dropdown-content class="f-dropdown mega">..

試してみる »

ドロップダウンメニューの余白

次のクラスを使用して.contentドロップダウンメニューに内側の余白を追加します。

例

<!-- Default Dropdown -->
<ul id="id01" data-dropdown-content class="f-dropdown">..

<!-- Dropdown with padding -->
<ul id="id02" data-dropdown-content class="f-dropdown content">..

試してみる »

その他の例

<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>

試してみる »

ドロップダウンメニューの方向

デフォルトでは、ドロップダウンメニューは下部にあります。追加することでdata-options="align:left|right|top"方向を変更できます：

例

<a href="#" data-dropdown="id01" data-options="align:right" class="button dropdown">Right</a>
<a href="#" data-dropdown="id02" data-options="align:top" class="button dropdown">Top</a>
<a href="#" data-dropdown="id03" data-options="align:bottom" class="button dropdown">Bottom</a>
<a href="#" data-dropdown="id04" data-options="align:left" class="button dropdown">Left</a>

試してみる »

ドロップダウンメニューのトリガー条件

デフォルトでは、ドロップダウンメニューはボタンをクリックすると表示されます。マウスを重ねたときに表示する必要がある場合は、ボタンにdata-options="is_hover:true"属性を使用します：

例

<a href="#" data-dropdown="id01" data-options="is_hover:true" class="button dropdown">Hover over me</a>
<ul id="id01" data-dropdown-content class="f-dropdown">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

試してみる »

分割ボタン

ボタンに.splitクラスを追加して分割効果のあるボタンを設定できます。分割後、<span> 要素に下向きのアイコンボタンが生成されます：

例

<button class="button split">Split Button
  <span data-dropdown="id01"></span>
</button>

<ul id="id01" data-dropdown-content class="f-dropdown">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

試してみる »
その他の拡張