[TIL #13] 햄버거 버튼 애니메이션 only HTML/CSS

Yejin Yang·2022년 4월 25일
0

[TIL]

목록 보기
13/67
post-thumbnail

개요

자바스크립트 없이 HTML과 CSS로 햄버거 버튼 만들기!

CSS :checked 사용하기

:checked 클래스와 체크박스를 사용해, JavaScript 없이도 사용자가 켜거나 끌 수 있는 콘텐츠를 구현할 수 있습니다. 다양한 예제는 링크된 사이트를 확인하세요!

결과 코드

Preview 👀

클릭 시 서브메뉴가 열리고 닫히는것만 자바스크립트로 구현한 거랍니다:) (TIL 참고)

회고

동적요소여서 막연히 자바스크립트로 애니메이션을 구현해야겠다고 생각했는데 CSS로도 충분히 자연스러운 애니메이션을 구현 할 수 있었습니다.

profile
Frontend developer

0개의 댓글