Web blog WEBブログ

【CSS:アコーディオンメニュー】クリックで開閉するメニュー

2018.04.12

こんにちは。コーダーの兼山です。

動きのある構成のコーディングをする際、
jqueryを使うのが一般的ですが、
できるだけ、jqueryの使用を避けたい場面に直面することも出てきます。

そんな時、役に立つ小技として、
今回は、簡単にできる、クリックで開閉できるアコーディオンメニューをご紹介します。

【目次】

デモ

ポイント

ここでのポイントは、
① HTML側のlabelの「for=””」と、inputの「id=””」を同じにすること。
② CSS側の .ac_menu input[type=”checkbox”].on-off + div{・・・}に「overflow: hidden;」を指定すること。
(コンテンツが丸見えになります。)

まとめ

ここでの難点は、コンテンツの高さを指定しなければならないことです。
機会があるときに、この点を改善したメニューをご紹介したいと思います。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア