[CSS] 햄버거 메뉴 버튼 만들기
2021. 5. 23. 03:22ㆍWeb/CSS
728x90
웹페이지나 모바일 메뉴에서 흔히 볼 수 있는 3줄로 구성된 모양의 햄버거 버튼입니다.
클릭 시 두 번째 줄은 투명해지고 첫 번째와 세 번째 줄이 이동하면서 각도를 바꿔 X자 형태를 만드는 원리입니다.
HTML, CSS, JavaScript 를 구분해 놓고 간략한 설명을 위해 주석을 달았습니다.
HTML
CSS
JavaScript
728x90
'Web > CSS' 카테고리의 다른 글
| [CSS] 폰트 어썸(Font Awesome) 사용법 (0) | 2021.07.30 |
|---|---|
| [CSS] CSS 파일 적용이 안 될 때 해결 방법 (8) | 2021.07.23 |
| [CSS] jpg파일로 움직이는 텍스트 애니메이션(text animation) 만들기 (0) | 2021.05.22 |
| [CSS] bootstrap 사용법 (0) | 2021.05.19 |
| [CSS] flex 속성 (0) | 2021.05.08 |