test2에서 생각했던것 보다 잘 안되서 다시 생각 좀 해보았다.
test2보다는 좀더 간단하게 구조를 해보았다.
기본 CSS를 설정
512px 사이즈일때 CSS를 변경해서 넣어준다.
반응형 웹은 모바일 기기를 위해 제작하는 경우가 많은데
transform:translate3d를 이용하면 좀더 기기에 부담을 덜 줄 수 있고
약간이나마 좀 더 부드러운 움직임을 구현할 수 있다.
translate3d는 좀 어려운 부분이라 따로 연구좀 해봐야 되는 부분이다.
나중에 기회가 되면 따로 다뤄봐야 겠다.
자바스크립트를 넣어주는데 ham클릭시 menu-wrap에 addClass로 menu-on 클라스를 추가해준다.
ham-wrap은 메뉴가 나왔을시 그 외에 부분은 어둠게 처리해서 메뉴에 집중시켜주는 효과를 넣어준다.
따로 닫기버튼이 없기 때문에 바탕을 클릭시 사라지게 끔 해보았다.
visibility 부분도 개념을 좀 알아야 되는데 나중에 다뤄야겠다.
간단하게 만들어서 여전히 허접하다
그래도 직접해보니깐 좀 발전해나아가는거 같아서 기분은 뿌듯하다.
