クリエイティブなWeb制作に
役立つ情報メディア

【jQuery】アコーディオンメニュー 上下にスライドして開閉するメニュー

最近Webサイト制作をしているとほぼどのサイトでも必ずと言っていいほど、クリックで隠れていたメニューやコンテンツが表示される機能を実装することが多いです。

アコーディオンメニューとかハンバーガーメニューとかスライドメニューとかスライドトグルとかあの上からスッと出てくるあれとか呼ばれる機能ですね。

jQueryを使えば実装自体はとてもシンプルなので簡単なデモを作ってみました。

アコーディオンメニュー

toggleメソッドを使えば簡単に実装できます。

jQueryライブラリの読み込み

jQueryを利用するのでライブラリを読み込みます。

サーバーにアップしたファイルを読みに行く場合

Google CDNを利用する場合

 

HTML

「.toggle_wrap」はスタイルを整えるのに使っているだけなので、動作上あってもなくても問題ありません。

「.toggle_switch」は隠れているコンテンツの表示・非表示を切り替えるトグルスイッチになります。

「.toggle_contents」は表示・非表示が切り替わるコンテンツです。

 

CSS

16行目:「.toggle_switch::after」でopen/closeの三角矢印アイコンを擬似要素として表示させています。

29行目:「.toggle_switch.open::after」でopenの時はアイコンを反転させます。

33行目:「.toggle_contents」最初は隠れている要素なので「display: none;」にしておきます。

javascript

1行目:「.toggle_switch」がクリックさるたびに以下の内容を実行します。

2行目:toggleClass()で、指定したクラス「.open」の追加・削除の切り替え。

3行目:slideToggle()で、クリックされた「.toggle_switch」の次の要素である「.toggle_contents」のオープン・クローズの切り替え。

 

デモ

実際の動きはこちらになります。

デモ

See the Pen Toggle by Creative Next (@Creative_Next) on CodePen.


 

ハンバーガーメニュー

よくある固定位置で画面に追従するハンバーガーメニューも簡単に実装できます。

HTML

「.menu-trigger」はメニューボタンです。

メニューが閉じている時は三本線、開いている時はバツ印になるよくあるアレですね。

「nav」はスライドで表示・非表示が切り替わるメニュー(グロナビ)です。

 

CSS

1行目:メニューボタンを含むヘッダー全体が固定で追従する想定です。

22行目~52行目:メニュー(グロナビ)の開閉に伴い、メニューボタンのアイコンが切り替わります。

58行目:「display: none;」でメニュー(グロナビ)は最初は隠れている状態にしておきます。

 

javascript

3・6行目:今回はtoggleClass()を使わず、addClass/removeClassでクラス「.active」の追加・削除を行っています。

4・7行目:今回はslideToggle()を使わず、slideUp/slideDownでメニュー(グロナビ)のオープン・クローズを行っています。

 

デモ

実際の動きはこちらになります。
デモ

See the Pen Accordion Menu by Creative Next (@Creative_Next) on CodePen.

まとめ

スライドでのコンテンツの表示・非表示の切り替えは、特にレスポンシブ等のサイトで本当によく使うので、今後の作業でサックと実装できるように基本的なテンプレートとしてまとめてみました。

N by