애니메이션되는 빵메뉴 CSS코드

모바일 메뉴에서 자주 사용하는 빵메뉴 를 좀더 재미있게 표현하는 시도들이 보이길래, 저도 따라해 봤습니다. ^^

메뉴를 클릭하면, 메뉴가 펼쳐진후, 메뉴의 모양새가 X 버튼처럼 바뀌는 것입니다.

CSS만을 이용하여 제작하는것이 편리하여, 마우스 오버시에 바뀌는 것으로 편의상 코딩하였습니다.

실제 사용할때는, hover 조건대신, javascript로 class를 add하거나 remove하여 사용하시면 되겠습니다.~

코드는 아래와 같습니다.

** -webkit-에서 동작하도록 프로그램되었습니다. 크롬이나 사파리에서 확인해보세요~^^

See the Pen Menu & Close Button by Jewon Bong (@tehillim) on CodePen.