GSAP | Almondlab

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

2022.01.09 / Notes

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

<div class="menu">
<p class="button">ボタン</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
<li>リスト6</li>
<li>リスト7</li>
<li>リスト8</li>
<li>リスト9</li>
<li>リスト10</li>
</ul>
</div><!-- menu -->

<ul>

</ul>

</div>

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

ul {
  height: 0px;
  overflow: hidden;
  pointer-events: none;
}
ul.open {
  pointer-events: auto;
}

ul {

height: 0px;

overflow: hidden;

pointer-events: none;

}

ul.open {

pointer-events: auto;

}

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

let menu = $("div.menu");
menu.find("p.button").on("click", () => {
  gsap.to(menu.find("ul"), {
    height: (menu.hasClass("open")) ? 0 : "auto",
    duration: 0.25,
    ease: "power2.inOut"
  });
  menu.toggleClass("open");
});

let menu = $("div.menu");

menu.find("p.button").on("click", () => {

gsap.to(menu.find("ul"), {

height: (menu.hasClass("open")) ? 0 : "auto",

duration: 0.25,

ease: "power2.inOut"

});

menu.toggleClass("open");

});