21.01.13 프로젝트#1 햄버거 버튼

홈 화면의 전체 메뉴를 띄우고 숨기기 위한 햄버거 버튼을 추가했다. 

 

 

 

 

 

 

 

 

 

 

✔ position 설정

애니메이션이 아닌 버튼 자체를 생성하는 것은 간단할 것이라 생각했지만 

position 설정이 의외의 첫 번째 복병이었다. 이 버튼이 영상과 반투명 레이어에

가려지지 않아야 하고 반투명 레이어 기준의 position에 대해서 설정해야하기 때문에 생각해야할 것이 많았다.

html 태그에서 부모 태그에 해당하는 반투명 레이어의 position : relative;로 설정하면 

그 좌측 최상단이 자식 태그의 (0,0)으로 기준이 된다.

position : absolute;와 position : relative;를 잘 설정하여 이 녀석이 예쁘게 자리를

잘 잡을 수 있게 만드는데 시간이 좀 걸렸다...

 

✔ z-index 설정

영상과 홈 화면 문구 그리고 반투명 레이어와의 z축 관계는 CSS에서 z-index로 설정하였다.

반투명 레이어가 중간에 위치해야하니 0인 initial로서 기준이 되고

영상은 -100, 버튼과 문구는 100으로 설정하여 위치 값을 지정했다.

 

✔ animation 설정

정지한 사진 상으로는 표현이 안되지만 심심하지 않게 애니메이션을 추가해보았다. 

아래의 햄버거 버튼을 누르면 

- 1차로 양 끝 줄이 가운데로 합쳐지면서 가운데 줄은 scale이 1에서 0이 된다.

- 2차로 양 끝 줄이 각각 45deg, 135deg로 회전하면서

전체 메뉴가 뜰 때 화면을 닫을 수 있게 하는 X 표시를 띄게 된다. 

 

✔ 현재 오류

하지만 문제가 있다. 햄버거 버튼을 누르면 애니메이션이 잘 작동되면서 X 버튼이 만들어지는데

CSS가 문제인건지 Jquery가 문제인건지 X 버튼을 눌렀을 때 다시 되돌아가지 않는다...

오타, 선택자, 괄호 순으로 다시 점검해봐야겠다. 애니메이션이 굉장히 많아져서 헷갈린다. 

유지-보수도 같이 생각해야하니까 갯수를 줄이는 방향과 주석으로 구분해주면서 해야겠다.

 

✔ 해결!! 👉 id로 지정되어있바던 line-top, line-mid, line-bot를 class 선택자 .으로 바꿨더니 해결됐다...

Jquery에서 toggleClass를 사용하려면 Class 선택자에 한해서 기능이 구현되는 것 같다. 

 

✔ 유지-보수 관련 팁 : 버튼을 눌러서 실행, 취소하고 싶을 때는 addClass, removeClass 를 일일이 하기보다는 

toggleClass를 사용하는 것이 효율적이다!!