財団ドロップダウンメニュー
財団のドロップダウンメニューは、ユーザーが事前に定義ののドロップダウンリストから値を選択することができます：
例
<AのHREF = "#"データ -dropdown = "id01"クラス= "button dropdown">ドロップダウンボタン</ A>
<！ -ドロップダウンコンテンツ- >
<ULのID = "ID01"データ -dropdown-コンテンツクラス= "F-ドロップダウン">
<李> <aのHREF = "#">リンク1 </ A> </ LI>
<李> <aのHREF = "#">リンク2 </ A> </ LI>
<李> <aのHREF = "#">リンク3 </ A> </ LI>
</ UL>
<！ -初期財団JS - >
<スクリプト>
$（ドキュメント）.ready（関数（）{
$（ドキュメント）.foundation（）;
}）
</スクリプト>
»をお試しください
分析の例
.dropdown下矢印ボタンなどのクラスは、シンボル"アイコンを追加します。
ボタンを使用するか、またはリンクするdata-dropdown=" id "のドロップダウンメニューを開くために属性を。
idの値は、コンテンツ（ID01）プルダウンメニューに一致する必要があります。
<div>、<NAV>、 <ul>追加.f-dropdownクラスおよびdata-dropdown-contentコンテンツのドロップダウンメニューを作成する属性を。
最後の初期化財団JS。
注：小さな画面で、ドロップダウンメニューの幅の全てが100％です。
[サイズ]ドロップダウンメニュー
使用.tiny 、 .small 、 .medium 、 .largeまたは.megaドロップダウンメニューの幅を変更することができます。
注：小さな画面で、ドロップダウンメニューの幅の全てが100％です。
例
<ULのid = "ID01"データ -dropdown-コンテンツクラス= "F-ドロップダウン小さな"> ..
<！ -小ドロップダウン：MAX-幅は300ピクセルです- >
<ULのid = "ID02"データ -dropdown-コンテンツクラス= "F-ドロップダウン小さな"> ..
<！ -ミディアムドロップダウン：MAX-幅が500pxなどです- >
<ULのID = "ID03"データ -dropdown-コンテンツクラス= "F-ドロップダウン媒体」>
<！ -大ドロップダウン：MAX-幅は800ピクセルです- >
<ULのID = "ID04"データ -dropdown-コンテンツクラス= "F-ドロップダウン大"> ..
< -メガドロップダウン:! 100％の幅- >
<ULのID = "ID04"データ -dropdown-コンテンツクラス= "F-ドロップダウンメガ"> ..
»をお試しください
余白]ドロップダウンメニュー
あなたが使用することができます.contentドロップダウンメニューにパディングを追加するクラス：
例
<ULのID = "ID01"データ -dropdown-コンテンツクラス= "F-ドロップダウン"> ..
<！ -パディングとドロップダウン- >
<ULのID = "ID02"データ -dropdown-コンテンツクラス= "F-ドロップダウンコンテンツ"> ..
»をお試しください
その他の例
マルチメディア要素を追加するには、<div>のドロップダウンメニュー：
例
<DIVのID = "ID01"データ -dropdown-コンテンツクラス= "F-ドロップダウンメディアコンテンツ」>
<H4>パリタイトル</ H4 >
<P>一部のテキスト..いくつかのテキスト .. </ P>
<IMG SRC = "あるparis.jpg" ALT = "パリ"幅= "400"高さ= "300">
<P>パリ、ジュテーム。 </ P>
</ DIV>
»をお試しください
プルダウンメニューの方向
デフォルトでは、下部にあるドロップダウンメニューには、あなたが追加することができdata-options="align:left|right|top" |右|トップ「その方向を変更するには：
例
<AのHREF = "#"データ -dropdown = "id02" data-options = "align: top"クラス= "button dropdown">トップ</ A>
<AのHREF = "#"データ -dropdown = "id03" data-options = "align: bottom"クラス= "button dropdown">ボトム</ A>
<AのHREF = "#"データ -dropdown = "id04" data-options = "align: left"クラス= "button dropdown">左</ A>
»をお試しください
プルダウンメニュートリガ条件
デフォルトでは、ドロップダウンメニューがクリックされたボタンに表示されます。 あなたはマウスアップディスプレイを移動する必要がある場合は、ボタンを使用することができますdata-options="is_hover:true" "属性：
例
<ULのID = "ID01"データ -dropdown-コンテンツクラス= "F-ドロップダウン">
<李> <aのHREF = "#">リンク1 </ A> </ LI>
<李> <aのHREF = "#">リンク2 </ A> </ LI>
<李> <aのHREF = "#">リンク3 </ A> </ LI>
</ UL>
»をお試しください
スプリットボタン
私たちは、ボタンを追加することができます.split分割エフェクトボタンがセグメンテーションの<スパン>要素の下方向のアイコンボタンを生成します設定するクラス：
例
<スパンデータ-ドロップダウン= "ID01 "> </ span>の
</ボタン>
<ULのID = "ID01"データ -dropdown-コンテンツクラス= "F-ドロップダウン">
<李> <aのHREF = "#">リンク1 </ A> </ LI>
<李> <aのHREF = "#">リンク2 </ A> </ LI>
<李> <aのHREF = "#">リンク3 </ A> </ LI>
</ UL>
<！ -初期財団JS - >
<スクリプト>
$（ドキュメント）.ready（関数（）{
$（ドキュメント）.foundation（）;
}）
</スクリプト>
»をお試しください