JavaScript

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

こんにちは!土門大貴(daikidomon)です。

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

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

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

アコーディオンメニュー

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

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

[codepen_embed height="450" theme_id="0" slug_hash="bOKxbK" default_tab="result" user="shimidai2100-the-bold"]See the Pen <a href='https://codepen.io/shimidai2100-the-bold/pen/bOKxbK/'>Accordion Menu</a> by shimidai2100 (<a href='https://codepen.io/shimidai2100-the-bold'>daikidomon-the-bold</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]

ファイル構成

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

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

HTMLファイル(index.html)

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

シンプルにulタグとliタグでメニューを作成しています。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Acodion Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Acodion Menu</h1>
</header>
<nav>
<button><img src="https://www.dropbox.com/s/tyxzpax5kvvaez1/button.png?dl=1" width="20" height="17" alt="Button"></button>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
</nav>
<main>
<p>これはテストです。だから無視してください。</p>
<p>これはテストです。だから無視してください。</p>
<p>これはテストです。だから無視してください。</p>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>

JavaScriptファイル(script.js)

実際にJQueryのメソッドを利用してアコーディオンメニューを制御するのは以下のコードになります。
$(function () {
let toggle = 0; // 閉じている
$("button").click(function () {
if (toggle === 0) {
$("ul").slideToggle();
toggle = 1;
} else {
$("ul").slideDown();
toggle = 0;
}
});
});

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

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

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

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

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

 

関連記事

-JavaScript

Copyright© スタートアップIT企業社長のブログ , 2020 All Rights Reserved.