この記事では、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; }
まとめ
いかがでしたか?以下のコードをもとに、自由にカスタマイズして自分のブログにマッチするアコーディオンメニューを作ってみてはいかがでしょうか。
コメント