全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
【CSS：アコーディオンメニュー】クリックで開閉するメニュー
2018.04.12
※この記事は2018年04月12日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
動きのある構成のコーディングをする際、
jqueryを使うのが一般的ですが、
できるだけ、jqueryの使用を避けたい場面に直面することも出てきます。
そんな時、役に立つ小技として、
今回は、簡単にできる、クリックで開閉できるアコーディオンメニューをご紹介します。
デモ
ポイント
ここでのポイントは、
① HTML側のlabelの「for=””」と、inputの「id=””」を同じにすること。
② CSS側の .ac_menu input[type=”checkbox”].on-off + div{・・・｝に「overflow: hidden;」を指定すること。
（コンテンツが丸見えになります。）
まとめ
ここでの難点は、コンテンツの高さを指定しなければならないことです。
機会があるときに、この点を改善したメニューをご紹介したいと思います。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
