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

javascript
この記事は約14分で読めます。
スポンサーリンク

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

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

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

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

共通のHTMLとCSS

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

HTML

<div class="demo">
  <ul class="accordion">
    <li>
      <p class="accordion__btn">アコーディオンするメニュー1<span></span></p>
      <ul class="accordion__inner">
        <li><a href="">メニュー1<span></span></a></li>
        <li><a href="">メニュー2<span></span></a></li>
        <li><a href="">メニュー3<span></span></a></li>
        <li><a href="">メニュー4<span></span></a></li>
      </ul>
    </li>
    <li>
      <p class="accordion__btn">アコーディオンするメニュー2<span></span></p>
      <ul class="accordion__inner">
        <li><a href="">メニュー1<span></span></a></li>
        <li><a href="">メニュー2<span></span></a></li>
        <li><a href="">メニュー3<span></span></a></li>
        <li><a href="">メニュー4<span></span></a></li>
      </ul>
    </li>
    <li>
      <p class="accordion__btn">アコーディオンするメニュー3<span></span></p>
      <ul class="accordion__inner">
        <li><a href="">メニュー1<span></span></a></li>
        <li><a href="">メニュー2<span></span></a></li>
        <li><a href="">メニュー3<span></span></a></li>
        <li><a href="">メニュー4<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);
});

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

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

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);
});
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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