財団ドロップダウンメニュー2024 年の最新の入門チュートリアル。このコースでは [サイズ]ドロップダウンメニュー,余白]ドロップダウンメニュー,その他の例,プルダウンメニューの方向,プルダウンメニュートリガ条件,スプリットボタン, について学習できます。
財団ドロップダウンメニュー
財団のドロップダウンメニューは、ユーザーが事前に定義ののドロップダウンリストから値を選択することができます:
例
<! -ドロップダウンをトリガ- >
<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%です。
例
<! -タイニードロップダウン:MAX-幅が200pxのです- >
<ULのid = "ID01"データ -dropdown-コンテンツクラス= "F-ドロップダウン小さな"> ja
<! -小ドロップダウン:MAX-幅は300ピクセルです- >
<ULのid = "ID02"データ -dropdown-コンテンツクラス= "F-ドロップダウン小さな"> ja
<! -ミディアムドロップダウン:MAX-幅が500pxなどです- >
<ULのID = "ID03"データ -dropdown-コンテンツクラス= "F-ドロップダウン媒体」>
<! -大ドロップダウン:MAX-幅は800ピクセルです- >
<ULのID = "ID04"データ -dropdown-コンテンツクラス= "F-ドロップダウン大"> ja
< -メガドロップダウン:! 100%の幅- >
<ULのID = "ID04"データ -dropdown-コンテンツクラス= "F-ドロップダウンメガ"> ja
»をお試しください
余白]ドロップダウンメニュー
あなたが使用することができます.content
ドロップダウンメニューにパディングを追加するクラス:
例
<! -デフォルトのドロップダウン- >
<ULのID = "ID01"データ -dropdown-コンテンツクラス= "F-ドロップダウン"> ja
<! -パディングとドロップダウン- >
<ULのID = "ID02"データ -dropdown-コンテンツクラス= "F-ドロップダウンコンテンツ"> ja
»をお試しください
その他の例
マルチメディア要素を追加するには、<div>のドロップダウンメニュー:
例
<AのHREF = "#"データ -dropdown = "id01"クラス= "button dropdown">ドロップダウンボタン</ A>
<DIVのID = "ID01"データ -dropdown-コンテンツクラス= "F-ドロップダウンメディアコンテンツ」>
<H4>パリタイトル</ H4 >
<P>一部のテキストjaいくつかのテキスト ja </ P>
<IMG SRC = "あるparis.jpg" ALT = "パリ"幅= "400"高さ= "300">
<P>パリ、ジュテーム。 </ P>
</ DIV>
»をお試しください
プルダウンメニューの方向
デフォルトでは、下部にあるドロップダウンメニューには、あなたが追加することができdata-options="align:left|right|top"
|右|トップ「その方向を変更するには:
例
<AのHREF = "#"データ -dropdown = "id01" data-options = "align: right"クラス= "button dropdown">右</ A>
<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"
"属性:
例
<AのHREF = "#"データ -dropdown = "id01" data-options = "is_hover: true"クラス= "button dropdown">ホバー私の上に</ A>
<ULのID = "ID01"データ -dropdown-コンテンツクラス= "F-ドロップダウン">
<李> <aのHREF = "#">リンク1 </ A> </ LI>
<李> <aのHREF = "#">リンク2 </ A> </ LI>
<李> <aのHREF = "#">リンク3 </ A> </ LI>
</ UL>
»をお試しください
スプリットボタン
私たちは、ボタンを追加することができます.split
分割エフェクトボタンがセグメンテーションの<スパン>要素の下方向のアイコンボタンを生成します設定するクラス:
例
<Buttonクラス= "ボタンスプリット" >スプリットボタン
<スパンデータ-ドロップダウン= "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();
})
</スクリプト>
»をお試しください