CSS 토글

1. HTML

<label for="toggle">아이콘</label>
<input type="checkbox" id="toggle">
<div id="menu">메뉴</div>

2. CSS

#toggle #menu {
  display: none;
}
#toggle:checked + #menu {
  display: block;
}

3. 주의사항

CSS의 '+' 연산자(?)는 바로 뒤의 엘레먼트에만 적용된다. 그래서 체크박스와 메뉴는 서로 앞뒤로 딱 붙어있어야 한다.