CSSでアコーディオンメニューを作る

この記事では、CSSだけでシンプルなアコーディオンメニューを作る方法を解説します。

大まかな流れ

HTML
アコーディオンメニューを表示したい場所にHTMLを入力します。
CSS
メニューのデザインと開閉動作のためのCSSを適用します。
動作確認
実際に記事内に記述してみて、しっかりアコーディオンっぽく動作するか確認します。

CSSのみで作ったアコーディオンメニュー
cssでアコーディオンメニューを作る
1. HTML
2. CSS
まとめ

CSSのみで作ったアコーディオンメニュー

こちらが、今回の記事で解説するアコーディオンメニューになります。

See the Pen Accordion by くろやぎ (@KUROYAGI) on CodePen.

主な特長は次の通りです。

メニューをクリックすることで、サブメニューが展開
展開時にアニメーションを使用し、滑らかに開閉
開閉時にアイコンにアニメーションを適用

cssでアコーディオンメニューを作る

HTML

まずは、labelとulを使って、メニューに表示させたい要素を入れていきます。【メニュー1】の部分が初期状態で表示されている要素で、【サブメニュー1】の部分がクリックをすると表示される要素になります。

<div class="menu">
    <input type="checkbox" id="menu_bar1" class="accordion" />
    <label for="menu_bar1">メニュー1</label>
    <ul id="links1">
        <li><a href="">サブメニュー1</a></li>
        <li><a href="">サブメニュー2</a></li>
    </ul>
    <input type="checkbox" id="menu_bar2" class="accordion" />
    <label for="menu_bar2">メニュー2</label>
    <ul id="links2">
        <li><a href="">サブメニュー1</a></li>
        <li><a href="">サブメニュー2</a></li>
    </ul>
</div>

<li><a href="">サブメニュー1</a></li>

<li><a href="">サブメニュー2</a></li>

</ul>

<li><a href="">サブメニュー1</a></li>

<li><a href="">サブメニュー2</a></li>

</ul>

</div>

CSS

チェックボックスに、チェックがついているときはサブメニューを非表示にして、チェックがついていないときは表示するというのが、このアコーディオンメニューの基本的な挙動になります。さらに、リッチさを演出するためにアニメーションを用いています。おまけに矢印アイコンを加えました。

.menu {
	width: 100%;
}

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

label {
  display: block;
  margin: 0 0 1px 0;
	padding :20px 10px;
	color :#fff;
  background :#043d78;
}

label:after {
  content: 'ｖ';
  position: absolute;
  right: 3%;
}

#menu_bar1:checked + label:after, #menu_bar2:checked + label:after {
	transition: all 0.5s;
}

#menu_bar1:checked + label:after,
#menu_bar2:checked + label:after {
  transform: rotateX(180deg);
  position: absolute;
  right: 3%;
}

input {
	display: none;
}

.menu ul {
	margin: 0;
	padding: 0;
  background :#f8f5e6;
	list-style: none;
}

.menu li {
  max-height: 0;
  overflow-y: hidden;
	transition: all 1s;
}

#menu_bar1:checked ~ #links1 li,
#menu_bar2:checked ~ #links2 li {
	max-height: 100px;
  opacity: 1;
}

.menu {

width: 100%;

}

.menu a {

display: block;

padding: 10px;

text-decoration: none;

color: #000;

}

label {

display: block;

margin: 0 0 1px 0;

padding :20px 10px;

color :#fff;

background :#043d78;

}

label:after {

content: 'ｖ';

position: absolute;

right: 3%;

}

#menu_bar1:checked + label:after, #menu_bar2:checked + label:after {

transition: all 0.5s;

}

#menu_bar1:checked + label:after,

#menu_bar2:checked + label:after {

transform: rotateX(180deg);

position: absolute;

right: 3%;

}

input {

display: none;

}

.menu ul {

margin: 0;

padding: 0;

background :#f8f5e6;

list-style: none;

}

.menu li {

max-height: 0;

overflow-y: hidden;

transition: all 1s;

}

#menu_bar1:checked ~ #links1 li,

#menu_bar2:checked ~ #links2 li {

max-height: 100px;

opacity: 1;

}

まとめ

いかがでしたか？以下のコードをもとに、自由にカスタマイズして自分のブログにマッチするアコーディオンメニューを作ってみてはいかがでしょうか。