Foundation によって、連続したボタンを（1行に）ボタングループとしてグループ化することができます。
ボタングループを作るには、クラス .button-group を持つ <ul> 要素を使用します：
<ul class="button-group">
<li><button type="button"
class="button">Apple</button></li>
<li><button type="button"
class="button">Samsung</button></li>
<li><button type="button"
class="button">Sony</button></li>
</ul>
結果：
.stack クラスは、縦型のボタングループを作ります。この場合、ボタンは親要素の幅全体に広がる点に
注意が必要です：
<ul class="button-group stack">
<li><button type="button"
class="button">Apple</button></li>
<li><button type="button"
class="button">Samsung</button></li>
<li><button type="button"
class="button">Sony</button></li>
</ul>
結果：
.stack-for-small クラスは、小型スクリーンでは縦型にボタンを積み重ね（スタック）ますが、
大型スクリーンでは横に並びます (ブラウザのウィンドウサイズを変更して確認してください)：
<ul class="button-group stack-for-small">
<li><button type="button"
class="button">Apple</button></li>
<li><button type="button"
class="button">Samsung</button></li>
<li><button type="button"
class="button">Sony</button></li>
</ul>
結果：
.radius と .round クラスは、ボタングループのコーナーに丸みを加えます：
<ul class="button-group radius">
<li><button type="button" class="button">Apple</button></li>
<li><button type="button" class="button">Samsung</button></li>
<li><button type="button" class="button">Sony</button></li>
</ul>
<ul class="button-group round">
<li><button
type="button" class="button">Apple</button></li>
<li><button
type="button" class="button">Samsung</button></li>
<li><button
type="button" class="button">Sony</button></li>
</ul>
結果：
.even-num クラスは、親要素の幅100％にグループ内のボタンを均等に広げるために使用します。
num は、グループ内のボタンの数に対応した 1 から 8 までの数でなければなりません：
<ul class="button-group even-3">
<li><button type="button"
class="button">Apple</button></li>
<li><button type="button"
class="button">Samsung</button></li>
<li><button type="button"
class="button">Sony</button></li>
</ul>
<ul class="button-group
even-5">
<li><button type="button"
class="button">Apple</button></li>
<li><button type="button"
class="button">Samsung</button></li>
<li><button type="button"
class="button">Sony</button></li>
<li><button type="button"
class="button">HTC</button></li>
<li><button type="button"
class="button">Huawei</button></li>
</ul>
<ul class="button-group
even-8">
<li><button type="button" class="button">A</button></li>
<li><button type="button" class="button">B</button></li>
<li><button type="button" class="button">C</button></li>
<li><button type="button" class="button">D</button></li>
<li><button type="button" class="button">E</button></li>
<li><button type="button" class="button">F</button></li>
<li><button type="button" class="button">G</button></li>
<li><button type="button" class="button">H</button></li>
</ul>
結果：
ドロップダウンメニューは、ユーザが前もって定義されたリストから値を選択できるメニューです：
<!-- Trigger the dropdown -->
<a href="#" data-dropdown="id01" class="button dropdown">Dropdown Button</a>
<!-- The actual dropdown -->
<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>
結果：
Try it Yourself ».dropdown クラスは、ドロップダウンボタンであることを示します。
ドロップダウンメニューを開くには、ボタンか、または data-dropdown="id" 属性
を持つリンクを使用します。
id 値は、ドロップダウンのコンテンツ（id01）に一致する必要があります。
実際にドロップダウンメニュー/コンテンツを作成するために、<ul> 要素に
data-dropdown-content 属性と共に .f-dropdown クラスを追加します。
コンテナ要素内の好きな場所に配置します。
最後に、ドロップダウンを動かすために foundation JS を初期化します。
スプリットボタンにより、ドロップダウン機能を使用することもできます。
単に、ボタンへ .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>
結果：
Try it Yourself » |
チップ: このチュートリアルの後段で、Foundation のドロップダウンに関して さらに多くのことを学習します。 |
|---|