この記事では、CSSだけでシンプルなアコーディオンメニューを作る方法を解説します。
大まかな流れ
- HTMLアコーディオンメニューを表示したい場所にHTMLを入力します。
- CSSメニューのデザインと開閉動作のための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>
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: 'v';
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;
}
まとめ
いかがでしたか?以下のコードをもとに、自由にカスタマイズして自分のブログにマッチするアコーディオンメニューを作ってみてはいかがでしょうか。