메뉴바를 클릭했을 때 에니메이션 효과를 내면서 변화시키려면 어떻게 해야할까?
답은 css와 javascript를 활용하면 된다.
아래는 클릭 전과 후 화면이다.
우선 구현해두어야 할 것은 html, css소스를 구현해두어야 한다. css는 클릭 전과 후를 각각 구현해야 한다.
html 소스는 다음과 같다. div를 이용하여 3개의 줄을 만든다.
클릭 전 css 소스를 보면 다음과 같다.
클릭 후 css 소스는 다음과 같다. transform을 이용하여 움직임을 구현한다.
클릭을 위한 자바스크립트 코드는 다음과 같다. 토글 방식으로 경우에 따라 css 속성을 변경해준다.
