GSAP

GSAPでアコーディオンメニュー作成のサンプル

2022.01.09 / Notes

JavaScriptライブラリのGSAPを使ったアコーディオンメニュー作成のサンプルです。
サンプルはこちら
HTMLは「div.menu」内に開閉用のボタンとリストのみを配置します。

初期表示で「height:0px; overflow: hidden;」として見えない状態にしておきます。
「pointer-events: none;」は閉じている時に、タブキー等でメニュー内の項目にフォーカスが当たらないようにしています。

開閉用のボタンがクリックされたら、「open」クラスの有無により開閉を行います。