JavaScript プログラミング

slideToggle、slideDownメソッドでアコーディオンメニューを作成する方法【JQuery】

投稿日:

こんにちは!シミダイ(@shimidai2100)です。

JQueryでアコーディオンメニューを作成する手順を紹介したいと思います。

アコーディオンメニューとは「スマホで端にハンバーガーアイコンをクリックすると出てくるメニュー」のことです。

JavaScript+JQureryを使えば誰でも簡単に作成できるので試してみてください。


アコーディオンメニュー

実際のアコーディオンメニューとはどんなものなのか確認しましょう。

以下のソースの右端をクリックしてみてください。

See the Pen Accordion Menu by shimidai2100 (@shimidai2100-the-bold) on CodePen.0

ファイル構成

今回のサンプルでは以下のファイル構成

html/
├ index.html
├ style.css
├ script.js(JQueryの制御を行う)

HTMLファイル(index.html)

今回使用するHTMLファイル「index.html」のソースコードは以下になります。

シンプルにulタグとliタグでメニューを作成しています。

JavaScriptファイル(script.js)

実際にJQueryのメソッドを利用してアコーディオンメニューを制御するのは以下のコードになります。

変数「toggle」はメニュー開閉のフラグです。

「toggle」が”0”の時は、メニューを閉じており、"1"の時はメニューを開いている状態になります。

フラグによって、「slideToggle」と「slideDown」させてメニューの開閉を行います。

ちなみに今回紹介したデザイン意外にも様々なデザインをJQueryで実装できるので以下の書籍がオススメです。

ぜひ参考にしてみてください。

 

スポンサードリンク

関連記事

-JavaScript, プログラミング

Translate »

Copyright© shimidai2100 , 2019 All Rights Reserved.