자바스크립트나 Jquery 도움 없이 순수하게 html과 css만을 이용해 오프캔버스 메뉴를 만드는 방법을 소개합니다.
이 방법은 지금 현재 코드랩 블로그에서 타블릿 PC와 모바일 해상도에 적용해 사용하고 있는 방법입니다. 아래 결과물과 소스를 한번 먼저 보여드리고 간략히 원리를 설명하겠습니다.
See the Pen #offcanvas - pure css by moksunung (@moksunung) on CodePen.
위와 같이 오프캔버스를 구현하는 원리는 다음과 같습니다.
1. 체크박스를 만든 뒤 display:none; 하여 감춥니다.
2. 위 체크박스에 연결되는 label을 만들어 버튼으로 사용합니다. (토글버튼 = 라벨 1번)
3. 마찬가지로 체크박스에 연결되는 또 하나의 label을 position:fixed; top:0; bottom:0; left:0; right:0 하여 화면에 꽉 차게 고정되는 검은 배경을 만듭니다. 이 라벨은 캔버스 메뉴가 열렸을 때, 캔버스 영역이 아닌 다른 영역을 클릭하면 체크박스에 체크가 해제되어 메뉴가 다시 감춰지도록 하는 클로저(closer)의 용도입니다. 클로저는 캔버스가 화면에 나타나 있을 때에만 작동되어야 하므로 기본상태는 display:none; 하여 감춥니다. (클로저 = 라벨 2번)
4. 체크박스, 라벨과 동일한 부모 안에(형제 선택자로 선택할 수 있도록 동일한 depth 에...) 캔버스메뉴를 만들고 transform:translateX(-100%); 하여 화면 밖으로 감춰놓습니다. 그리고, 나타날 때 애니메이션 효과를 주기 위해 transition을 걸어둡니다.
5. 이제 버튼 라벨을 누르면 숨겨진 체크박스에 체크가 되어 캔버스가 화면에 나타나도록 이벤트를 만들어야 합니다. 버튼 라벨(라벨1)을 누르면 체크박스가 체크상태가 되니 체크되어 있는 상태를 선택하는 가상선택자 :checked 를 사용하여, 체크박스에 체크가 되면 형제 엘리먼트인 오프캔버스메뉴가 화면에 나타노도록 형제선택자 ~ 로 캔버스메뉴 엘리멘트를 선택하여, transform:translateX(0);을 통해 화면에 나타나도록 설정합니다.
6. 5번까지만 해도 오프캔버스 토글 메뉴가 완성된 셈이지만, 위의 예제 처럼 토글 버튼이 캔버스에 가려지면 버튼을 클릭하여 메뉴를 닫을 수 없으므로, 그리고 메뉴를 쉽게 닫을 수 있도록 사용자 편의를 제공하기 위해 라벨2번을 만듭니다. 방법은 5번과 같습니다. 체크박스의 가상선택자 :checked 와 형제선택자 ~ 를 이용해 체크상태일 때의 라벨2번을 잡고, display:block; 하여 오프캔버스가 열리면 보여지게 합니다. 그러면 사용자가 화면에 꽉찬 검은색 바탕인 클로저를 클릭해 토글메뉴를 닫을 수 있게 됩니다.
이상입니다. 위 예제의 소스에는 demo 디자인을 위해 불필요한 코드까지 포함되어 있기는 하지만, 설명을 면서 코드를 훑어보시면 이해가 되실겁니다.
설명이 이해가 안되시거나, 부연설명이 필요하시면 댓글 달아주세요 ^^ 답변드리겠습니다.
