html만으로 아코디언 메뉴 만들기
HTML5에 새로 추가된 details, summary 태그만으로 아코디언 메뉴를 제작할 수 있다.
아코디언 메뉴란?
한번쯤은 다들 사용해봤을 것이다.
상단 메뉴가 있고 하단 메뉴는 최초에 숨겨져 있는 상태.
상단 메뉴를 클릭하면 하단 메뉴가 짜잔! 하고 보여지는 메뉴를 아코디언 메뉴라고 한다.
왜? 아코디언이냐고하면 이미지 보면된다.
하여튼 details와 summary를 사용해서 만들어보자.
HTML
<details>
<p>
summary가 없으면 타이틀이 '세부정보'<br>
html만으로도 가능합니다.
</p>
</details>
<details>
<summary>
클릭하세요 02
</summary>
<p>
아직 크롬, 파이어폭스만 가능합니다.
</p>
</details>
<summary> 태그가 없으면 타이틀이 '세부정보'로 보여진다.
CSS
section {
max-width: 500px;
}
details {
background: #f0f0f0;
padding: 20px;
margin-bottom: 5px;
}
summary {
cursor: pointer;
font-weight: bold;
font-size: 1.1em;
}
브라우저 호환은 아직 크롬, 파이어폭스만 가능하다.
자세한 것은 MDN링크 클릭!
예제