jQuery

【jQuery】アコーディオンメニューを実装

jQueryでアコーディオンメニューを作るときの方法についてまとめます。

私自身の備忘録として残しています。

アコーディオンメニューには「toggle」

See the Pen vYyGdoj by momo (@momo-cha) on CodePen.dark

CSSに追加するコード

CSSのコードは下記の通り。

#menu {
position: relative;
}
.nav-toggle {
display: none;
background-color: #FFCCFF;
position: absolute;
width: 50px;
}

CSSを書く際に気を付けておきたい、チェックポイントは下記の通り。

  • 親にしたい要素に「position: relative;」を追加
  • アコーディオンメニューとなる子要素に「position: absolute;」を追加
  • 子要素は通常非表示となるため「display: none;」に設定

jsに追加するコード

$(‘#menu’).click(function() {
$(‘.nav-toggle’).slideToggle(1000);
});

これでクリックするとメニューが降りてきます。