【CSS / JavaScript】アコーディオンメニューの作り方

Contents

アコーディオンメニューとは

アコーディオンメニューとは、クリックすると隠れているメニューがアコーディオンのように伸びて表示されるメニューのことを指します。

この記事ではCSSのみでのアコーディオンメニューの作り方と、CSSとJavaScriptの２つを用いたやり方の。2種類を紹介しています。

コピペOKなので、自分のデザインに合わせてカスタマイズしてください。

CSSでのアコーディオンメニュー

See the Pen accordion2 by 古澤良汰 (@ryotarofu) on CodePen.

HTML

<div class="accordion">
    <label for="menu">MENU</label>
    <input type="checkbox" id="menu" />
    <ul id="link">
    <li><a>menu1</a></li>
    <li><a>menu2</a></li>
    <li><a>menu3</a></li>
    </ul>
</div>

CSS

.accordion {
    max-width: 50%;
    height:250px;
}

.accordion a {
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #000;
}

label {
    display: block;
    margin: 0;
    padding : 15px;
    line-height: 1;
    color :#fff;
    background : #000;
    cursor :pointer;
    text-align:center;
}

input {
    display: none;
}

.accordion ul {
margin: 0;
padding: 0;
background :#dfdfdf;
list-style: none;
}

.accordion li {
    height: 0;
    overflow: hidden;
    text-align:center;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.accordion li:hover{
  background-color:#888;
}

#menu:checked ~ #link li {
    height: 60px;
    opacity: 1;
}

Javascriptでのアコーディオンメニュー

See the Pen accordion1 by 古澤良汰 (@ryotarofu) on CodePen.

HTML

      <div class="accordion">
        <p class="menu js">MENU</p>
        <a class="link">menu1</a>
        <a class="link">menu2</a>
        <a class="link">menu3</a>
      </div>

CSS

Result Skip Results Iframe
EDIT ON
.accordion{
  width:50%;
}

.menu {
  background-color: #000;
  color: #fff;
  font-size: 18px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.menu:hover,
.menu:active,
.menu.active {
  background-color: black;
}

.link {
  display:block;
  text-align: center;
  line-height: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition-duration: 0.4s;
}

.link.open {
  background-color:#dfdfdf;
  padding: 10px;
  line-height: 2;
  height: auto;
  opacity: 1;
}

.link:hover{
  background-color:#888;
}

JavaScript

const menu = document.querySelectorAll(".js");

      function toggle() {
        const content = document.querySelectorAll(".link");
        for (let i = 0; i < content.length; i++) {
        content[i].classList.toggle("active");
        content[i].classList.toggle("open");
        }
      }

      for (let i = 0; i < menu.length; i++) {
        menu[i].addEventListener("click", toggle);
      }