【jQuery】コピペで実装！アコーディオンメニュー３選

この記事は約14分で読めます。

アコーディオンメニューをコピペで実装できるサンプル３つを用意しました。

３つ共にアコーディオンメニューは、数を増減しても同じように機能します。また「position:absolute」で高さを無くした状態になっています。

アコーディオンメニューをクリックで矢印が逆向きになる機能と、中のメニューはホバーすると矢印がピョーンと外にアニメーションする機能と、偶数メニューの背景に薄い黒を引いてます。
リンクをクリック時にアコーディオンを閉じてから画面遷移します。

全て簡単な編集で付け外しできるので、そのままでも利用できるし不要な機能が有ったらカスタマイズしてご利用ください。
その他の個別の機能については、サンプルごとに解説します。
使用用途に応じてコピペしてください。

共通のHTMLとCSS

下で紹介する3つのアコーディオンメニューは、共通のHTMLとCSSを利用します。
まずは、共通のHTMLとCSSをコピペしてね！

HTML

<div class="demo">
  <ul class="accordion">
    <li>
      <p class="accordion__btn">アコーディオンするメニュー１<span></span></p>
      <ul class="accordion__inner">
        <li><a href="">メニュー１<span></span></a></li>
        <li><a href="">メニュー２<span></span></a></li>
        <li><a href="">メニュー３<span></span></a></li>
        <li><a href="">メニュー４<span></span></a></li>
      </ul>
    </li>
    <li>
      <p class="accordion__btn">アコーディオンするメニュー２<span></span></p>
      <ul class="accordion__inner">
        <li><a href="">メニュー１<span></span></a></li>
        <li><a href="">メニュー２<span></span></a></li>
        <li><a href="">メニュー３<span></span></a></li>
        <li><a href="">メニュー４<span></span></a></li>
      </ul>
    </li>
    <li>
      <p class="accordion__btn">アコーディオンするメニュー３<span></span></p>
      <ul class="accordion__inner">
        <li><a href="">メニュー１<span></span></a></li>
        <li><a href="">メニュー２<span></span></a></li>
        <li><a href="">メニュー３<span></span></a></li>
        <li><a href="">メニュー４<span></span></a></li>
      </ul>
    </li>
  </ul>
</div>

CSS

.demo {
  position: relative;
  width: 100%;
  height: 312px;
  margin: 0 auto;
  background: #f5f5f5;
  border-radius: 20px;
  box-shadow: 0 12px 60px -40px rgba(0, 0, 0, 0.4) inset;
  color: #5b5b5b;
}
.accordion {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 90%;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.2);
}
.accordion > li {
  position: relative;
  display: block;
  background: #ffffff;
}
.accordion > li:first-child > p {
  border-top: none;
}
.accordion__btn {
  position: relative;
  font-size: 18px;
  font-weight: 600;
  padding: 22px 26px;
  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.08) inset;
  transition: .2s ease-in-out;
  cursor: pointer;
}
.accordion__btn > span {
  position: absolute;
  top: 50%;
  right: 26px;
  transform: translateY(-50%);
  width: 21px;
  height: 11px;
  display: block;
}
.accordion__btn > span:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(45deg);
  width: 60%;
  height: 2px;
  display: block;
  background: #5b5b5b;
  transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.accordion__btn > span:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(-45deg);
  width: 60%;
  height: 2px;
  display: block;
  background: #5b5b5b;
  transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.accordion__btn:hover {
  opacity: .4;
}
.accordion__inner {
  height: 0;
  background: #f5f5f5;
  box-shadow: 0 17px 40px -37px rgba(0, 0, 0, 0.5) inset;
  transition: .6s;
}
.accordion__inner > li {
  text-align: center;
}
.accordion__inner > li:nth-child(even) {
  background: rgba(0, 0, 0, 0.06);
}
.accordion__inner > li a {
  position: relative;
  font-size: 17px;
  display: block;
  padding: 20px 6px;
  color: #5b5b5b;
  font-weight: bold;
  text-decoration: none;
  transition: .2s ease-in-out;
}
.accordion__inner > li a span {
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  width: 11px;
  height: 16px;
  display: block;
  transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.accordion__inner > li a span:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 2px;
  height: 60%;
  display: block;
  background: #5b5b5b;
}
.accordion__inner > li a span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  width: 2px;
  height: 60%;
  display: block;
  background: #5b5b5b;
}
.accordion__inner > li a:hover {
  background: #fff;
  box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.08) inset;
}
.accordion__inner > li a:hover span {
  right: -16px;
}
.active .accordion__btn > span:before {
  transform: translateY(-50%) rotate(-45deg) !important;
}
.active .accordion__btn > span:after {
  transform: translateY(-50%) rotate(45deg) !important;
}

クリック時に他のメニューを閉じるアコーディオンメニュー

このサンプルのアコーディオンは最初すべて閉じた状態です。
アコーディオンメニューをクリックすると、その他の開いてるメニューが閉じます。

jQuery

$(".accordion__btn").on("click", function() {
  var accordion = $(this).parent("li");
  if(!accordion.hasClass("active")) {
    $(".accordion > li").removeClass("active").find(".accordion__inner").css({height: 0});
    accordion.addClass("active").find(".accordion__inner").css({height: accordion.find(".accordion__inner li").outerHeight(true)*accordion.find(".accordion__inner li").length});
  } else {
    accordion.removeClass("active").find(".accordion__inner").css({height: 0});
  }
});
$(".accordion__inner a").on("click", function() {
  event.preventDefault();
  var link = $(this).attr('href');
  $(".accordion > li").removeClass("active").find(".accordion__inner").css({height: 0});
  setTimeout(function() {
    location.href= link;
  }, 600);
});

クリック時に他のメニューを開きっぱなしにするアコーディオンメニュー

このサンプルのアコーディオンは最初すべて閉じた状態です。
アコーディオンメニューをクリックしても他のメニューは閉じません。

jQuery

$(".accordion__btn").on("click", function() {
  var accordion = $(this).parent("li");
  if(!accordion.hasClass("active")) {
    accordion.addClass("active").find(".accordion__inner").css({height: accordion.find(".accordion__inner li").outerHeight(true)*accordion.find(".accordion__inner li").length});
  } else {
    accordion.removeClass("active").find(".accordion__inner").css({height: 0});
  }
});
$(".accordion__inner a").on("click", function() {
  event.preventDefault();
  var link = $(this).attr('href');
  $(".accordion > li").removeClass("active").find(".accordion__inner").css({height: 0});
  setTimeout(function() {
    location.href= link;
  }, 600);
});

最初にメニューが１つ開いてる状態のアコーディオンメニュー

このサンプルのアコーディオンは最初１つ開いた状態です。
アコーディオンメニューをクリックすると他のメニューが閉じます。

jQuery

$(".active").find(".accordion__inner").css({height: $(".active").find(".accordion__inner li").outerHeight(true)*$(".active").find(".accordion__inner li").length});
$(".accordion__btn").on("click", function() {
  var accordion = $(this).parent("li");
  if(!accordion.hasClass("active")) {
    $(".accordion > li").removeClass("active").find(".accordion__inner").css({height: 0});
    accordion.addClass("active").find(".accordion__inner").css({height: accordion.find(".accordion__inner li").outerHeight(true)*accordion.find(".accordion__inner li").length});
  } else {
    accordion.removeClass("active").find(".accordion__inner").css({height: 0});
  }
});
$(".accordion__inner a").on("click", function() {
  event.preventDefault();
  var link = $(this).attr('href');
  $(".accordion > li").removeClass("active").find(".accordion__inner").css({height: 0});
  setTimeout(function() {
    location.href= link;
  }, 600);
});
javascriptjQueryサイト制作
エンデ・バタロー

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ
初めてのブログ

コメント

タイトルとURLをコピーしました