클릭하면 나타나는 메뉴 만들기

1. 목표

2. 완성 코드

---

1. 목표

[그림 1] 메뉴 클릭하기 전 모습

메뉴를 클릭하기 전에는 햄버거(?)처럼 생긴 메뉴의 모양만 나타난다.

 

[그림 2] 메뉴 클릭한 후 모습

메뉴를 클릭했을 때에는 메뉴바가 나타나면서 그 안에 menu1, menu2, menu3 이라는 목록이 보인다. 

 

 

2. 완성 코드

[그림 3] HTML 문서

[그림 1]에 나타나는 메뉴를 input 태그를 사용하여 type은 checkbox, id는 icon으로 지정하였다. span 태그 3개를 이용해서 햄버거 모양이 되도록 CSS에서 작업할 것이다. 

 

[그림 2]에서 나타나는 메뉴바는 div 태그를 사용하여 id는 header로 하고 그 안에 ul, li 태그를 사용해 menu 목록을 만들었다.

 

[그림 4] CSS 문서 설명