メニュー
デモ
押してください
- メニュ−１
- メニュ−２
- メニュ−３
閉じる
JSコードコピー
使い方
メニューを表示するためのトリガー要素を１つ用意し、data-jscopyand="menuTrigger"を付与してください。
メニューとそれを囲う要素を１つ用意し、囲った要素にdata-jscopyand="menuBody"を付与してください。
メニューを閉じるためのトリガー要素をdata-jscopyand="menuBody"の中に１つ用意し、data-jscopyand="menuClose"を付与してください。
data-jscopyand="menuTrigger"の要素は開閉どちらも行うことができます。
data-jscopyand="menuClose"は閉じる専用です。
解説
まずは３つの要素（開閉トリガー、メニュー本体、閉じる専用トリガー）を変数に格納します。
続いてメニューの表示状態を管理する変数を定義します。
メニューを開く用の関数を定義します。
メニューは画面外から画面内に入ってくるようなアニメーションにするため、transformスタイルを使用します。
表示状態を管理する変数はtrueにしておきます。
メニューを閉じる用の関数を定義します。
transformスタイルで自身の横幅分左にずらし、画面外へ押し出します。
表示状態を管理する変数はfalseにしておきます。
初期状態が閉じた状態になるように関数を呼んでおきます。
開閉トリガー要素にイベントを設定します。
表示状態を管理している変数isVisibleを見て、開くか閉じるかを判断しています。
閉じる専用トリガー要素にイベントを設定します。
最後にアニメーションを有効にするためのスタイルをメニュー要素に追加します。
setTimeoutをしているのは、初期状態が閉じた状態になるように呼んだ関数hideがアニメーションにならないようにするためです。
ヘルプ・コンタクト
機能に関するご質問は、このページの下部に表示されている Twitter
のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM
等でご連絡ください。