Foundation-ドロップダウンJavaScriptリファレンス

Foundationは、以下にリストするドロップダウンメニュー用のJavaScriptコンポーネントを提供します。

初期化中

_foundation.dropdownMenu.js_および_foundation.core.js_プラグインを使用して、JavaScriptのドロップダウンメニューを初期化できます。プラグインには、次のライブラリが必要です-

以下で定義されているように、ドロップダウンメニューのインスタンスを指定します-

var elem = new Foundation.DropdownMenu(element);

Sr.No.

Name & Description

Type

1

Element

jQueryオブジェクトをドロップダウンメニューに作成します。

jQuery

2

Options

デフォルトのプラグイン設定はオーバーライドされます。

Object

次のプラグインを使用して、ドロップダウンメニューインスタンスをカスタマイズできます。プラグインオプションを個別のデータ属性として設定できます。

Sr.No.	Name & Description	Example
1	disableHover ホバーイベントはサブメニューを開くことができません。false	false
2	autoclose マウスがイベントを離れると、自動的にサブメニューが閉じられます。	true
3	hoverDelay ホバーイベントでサブメニューを開く間、時間を遅らせます。	50
4	clickOpen サブメニューは、親クリックイベントで開いたままにすることができます。	true
5	closingTime mouseleaveイベントでサブメニューを閉じる間、時間を遅らせます。	500
6	alignment メニューに応じて、方向はサブメニューを開くように設定されます。	'left'
7	closeOnClick 開いているサブメニューは、本体をクリックすると閉じられます。	true
8	verticalClass メニューを垂直に設定するには、_vertical_クラスを使用します。	'vertical'
9	rightClass メニューを右側に設定します。	'align-right'
10	forceFollow デフォルトのアクションを実行するために、ブール値はモバイルの2番目のタッチイベントをクリックするリンクを強制的にオーバーライドします。	false

任意の要素に添付されたドロップダウンメニュープラグインは、次のイベントをトリガーできます。

Sr.No.

Name & Description

1

show.zf.dropdown menus

新しいドロップダウンペインが表示されると、イベントがトリガーされます。

2

hide.zf.dropdown menus

開いているメニューが閉じられると、イベントがトリガーされます。

プラグインは破棄されます。