【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); }