JavaScript プログラミング

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

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

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'>@shimidai2100-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© shimidai2100 , 2020 All Rights Reserved.