ClickIt.js

ハンバーガーメニュー

sync

インスタンスを作成する際にsyncプロパティにセレクタが指定されていれば、triggerプロパティで指定した、発火元の要素と同じ動作をするエイリアスとして扱います。

エイリアスは複数指定ができます。セレクタが.sampleであれば、ドキュメント内でこのクラスが付与されたすべての要素がエイリアスとなります。

エイリアスは、トリガーとなる要素に、data-clickit-sync属性の値としてセレクタを記述することでも指定できます。
（syncプロパティと同時に指定されていた場合は、data-clickit-sync属性を優先します）

このサンプルの左上のメニューでは、展開後のメニューの下にある「閉じる」ボタンがエイリアスとなっています。
閉じるボタンをクリックすると、トグルボタンが ≡ から × に戻ることを確認してください。

このサンプルの右上のメニューでは、展開後のメニューの背景と「閉じる」ボタンの2箇所がエイリアスとなっています。
背景とボタンのどちらをクリックしても、右上のトグルボタンが ≡ から × に戻ることを確認してください。

openDelay, closeDelay

開くときと閉じるときで待機時間を変えることもできます。右のメニューはアニメーションの時間が異なることや、アニメーションの途中で背景を再度クリックしても何も起こらないことを確認してください。