ボタン

ボタンは、a.buttonで表現できます。さらにクラスを指定することで、複数のタイプのボタンを表現することができます。


Default Button
Tiny Button
Small Button
Large Button


Secondary Button
Success Button
Alert Button


Radius Button
Round Button


Disabled Button

↓結果

ボタングループは、ul.button-groupとして、複数のボタンを一行のグループとしてまとめて表示させます。
前項のボタン同様、カラーや無効などのクラスが扱えますが、角丸の処理はグループ全体としておこないますので、個別に指定しないようにしてください。



  Button 1
  Button 2
  Button 3





  Button 1
  Button 2
  Button 3

↓結果

ドロップダウンボタンは、ボタンをクリックすると複数の下層メニューが表示されるボタン形式のメニューです。
a.button.dropdownとすることで、ボタンの右端に▼マークが付き、メニューが隠れていることが表示されます。
ボタンの表示は、一般のボタンと同じように

が使用できます。

Dropdown Button
Dropdown Button
Dropdown Button
Dropdown Button
Dropdown Button

↓結果

また、表示させるメニュー部分に関しては、foundation.jsを読み込んだ後にfoundation.dropdown.jsを読み込ませます。

...

その上で、以下のようにメニューを生成します。（この部分が、ボタンをクリックした時に表示される内容になります。）

Dropdown Button



  This is a link
  This is another
  Yet another

このとき、ボタンのdata-dropdownの値とメニューのidの値を同一にします。
例）data-dropdown="drop1" と id="drop1"

ドロップダウンボタンは、グループボタンの中に配置することも可能です。
このページの上部のメニューにも配置していますので参考にしてください。
また、リンクを#で指定する必要があるため、アンカースクロール系のjsが動かない場合があります。スクロール側で制御方法を変えるなどの工夫が必要になります。

スプリットボタンは、前項と同じく下層メニューを内包するボタンです。ドロップダウンと異なるのは、ラベル部分とメニューが表示される▼部分が区切られているところです。

ほぼドロップダウンボックスと扱いは同じです。
a.button.splitの指定と、メニュー側ではulにdata-dropdown-contentを指定します。

Dropdown Button 

  This is a link
  This is another
  Yet another

↓結果

Foundation 5 日本語チートシート