Twitterでブログ更新情報を配信中

【jQuery】コピペでOK!slideToggleとhasClassでアコーディオンメニューを簡単実装

スマホメニューを一から実装するのは時間がかかりますよね。手早く作りたい方向けに、コピペでできるアコーディオンメニューを用意しました。ヘッダー付きなので、簡単なスタイルの調整のみでサイトに合うメニューがすぐにできますよ!

対象として、5~6ページ程度の小規模サイトを想定しているため、各メニューに下層ページのないシンプルな構成となります。

アコーディオンメニューの完成図

ファイルの準備

下記ファイルを同じ階層に準備してください。reset.cssは任意ですが、汎用性のあるファイルをダウンロードするだけでOKです。

  • index.html
  • accordion.js
  • reset.css
  • style.css

HTMLのソースコード

アコーディオンメニュー以外不要な場合は、コメントで囲われた部分のみ使用してください。

<!DOCTYPE html>
<html lang="ja"> 
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="accordion.js"></script>
<title>アコーディオンメニュー</title>
</head>

<body>

<header>
   <div class="inner">
     <div class="menu"><!-- アコーディオン部分 ここから -->
          <a href="#" class="btn"></a>
          <ul class="nav">
              <li><a href="">メニュー1</a></li>
              <li><a href="">メニュー2</a></li>
              <li><a href="">メニュー3</a></li>
              <li><a href="">メニュー4</a></li>
              <li><a href="">メニュー5</a></li>
              <li><a href="">メニュー6</a></li>
          </ul>
      </div><!-- アコーディオン部分 ここまで -->
   </div>
</header>

</body>
</html> 

CSSのソースコード

アコーディオンメニュー以外不要な場合は、header、inner、 /*トル*/ を削除してください。

@charset "utf-8";

header{
   background-image:linear-gradient(to right, #74ebd5 0%, #9face6 100%);
}
.inner{
   width: 100%;
   height: 70px;/*高さ対応*/
   margin: 0 auto;
   display: flex;
   align-items: center;
   position: relative;
}
.btn{
   display: block;
   width: 45px;
   height: 45px;
   position: absolute;
   top: 0;
   bottom: 0;/*トル*/
   right: 5%;/*右側に配置*/
   margin: auto;
   background-color: #cccccc;
   border: solid 1px #aeaeae;
   border-radius: 5px;
   box-sizing: border-box;
}
.btn::before{
   content: '\f0c9';
   font-family: 'Font Awesome 5 Free';
   display: block;
   font-weight: 900;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
}
.btnOn{
   color: #fff;
   background-color: #808080;
   border: solid 1px #666666;
}
.menu{
   width: 100%;
   height: auto;
   margin: 0 auto;
}
.menu ul.nav{
   width: 100%;
   height: auto;
   display: none;
   position: absolute;
   top: 70px;/*高さ対応*/
}
.menu ul.nav li a{
   display: block;
   width: 100%;
   padding: 10px;
   border: 1px solid #ccc;
   border-top: none;
   box-sizing: border-box;
} 

jQueryのソースコード

slideToggleもしくはhasClassいずれかをJavaScriptファイルに貼り付けてください。

slideToggleで実装

$(function(){
       $('.btn').on('click', function(){
               $('.nav').stop().slideToggle();
       });
}); 

hasClassで実装

$(function(){
       $('.btn').on('click', function(){
               if($(this).hasClass('btnOn')){
                       $(this).removeClass('btnOn');
                       $('.nav').slideUp();
               }else{
                       $(this).addClass('btnOn');
                       $('.nav').slideDown();
               }
       });
}); 

スマホのときに適用する

HTMLの場合

HTMLに記述するときは、head内に予めビューポートを読み込みましょう。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

こちらもhead内に記述してください。style.cssのあとにメディアクエリが指定されています。

<link rel="stylesheet" href="style.css" media="screen and (max-width: 768px)"> 

CSSの場合

CSSに記述するときは、メディアクエリのカッコ内にスタイルを記述してください。

@media (max-width:768px) { } 

動かないときは

メニューが開かないときは、下記をチェックしてください。

  • jQueryをheadで読み込んでいるか
  • セミコロン、カッコが抜けていないか
  • クォーテーションが半角になっているか

今回はコピペでできるアコーディオンメニューの実装方法をご紹介しました。

カスタマイズに慣れていない方は、そのままのスタイルで使うことをおすすめします。スマホ時のみ表示させたい場合は、HTMLもしくはCSSの記述が別途必要になるので忘れずに対応してください。