【css】アコーディオンメニュー【最低限】

cssオンリーの最低限だけ記載したアコーディオンメニュー

See the Pen
アコーディオンメニュー by kurosu haruka (@skysound98)
on CodePen.

html

<ul class="accordion-menu">
<li class="out-menu"><label for="m1">メニュー1</label>
  <input type="checkbox" id="m1" class="accordion">
	<ul id="in-menu1">
	<li class="in-menu">メニュー1-1</li>
	<li class="in-menu">メニュー1-2</li>
	<li class="in-menu">メニュー1-3</li>
	</ul>
</li>
<li class="out-menu"><label for="m2">メニュー2</label>
  <input type="checkbox" id="m2" class="accordion">
	<ul id="in-menu2">
	<li class="in-menu">メニュー2-1</li>
	<li class="in-menu">メニュー2-2</li>
	<li class="in-menu">メニュー2-3</li>
	</ul>
</li>
<li class="out-menu"><label for="m3">メニュー3</label>
  <input type="checkbox" id="m3" class="accordion">
	<ul id="in-menu3">
	<li class="in-menu">メニュー3-1</li>
	<li class="in-menu">メニュー3-2</li>
	<li class="in-menu">メニュー3-3</li>
	</ul>
</li>
</ul>

css

.accordion-menu input.accordion{
  display: none;
}
.accordion-menu input.accordion:checked + ul{
  height: auto;
}
.accordion-menu ul{
  height: 0;
  overflow: hidden;
}

.accordion-menu input.accordion:checked + ulに明確な高さを指定しないとアニメーションが動作しないため、アニメーションは無し。

checkboxを隠して作成していて、それがチェックされたら表示する、という動作をしています。

ちなみに、アニメーションありだとこうなります。

See the Pen
アコーディオンメニュー2 by kurosu haruka (@skysound98)
on CodePen.

デモとしては問題ないもののサブメニューの数を統一しないといけないので実用性はいまいち……。
アニメーションを付けたい場合は素直にJQueryの使用をお勧めします。