[CSS] 오프 캔버스 패턴(off Canvas)

Front-End/LayoutPattern 2016. 12. 19. 19:28

오프 캔버스 패턴(off Canvas)

1. 정의

- 창의 크기가 작아져서 더 이상 창 안에서 콘텐츠를 표현 할 수 없을 때 창의 바깥쪽으로 내용을 숨기는 기법

- 숨겨진 버튼이나 텍스트를 만들어 호출 시, 창 안쪽으로 불러온다

- 다른 패턴에 비해 구현이 복잡하다

2. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <style type="text/css">  </style> </head> <div class="container"> <div class="c1" id="leftDrawer"></div> <div class="c2" id="mainPanel"></div> <div class="c3" id="rightDrawer"></div> </div> <script> var position = 0; var mainPanel = document.getElementById("mainPanel"); var leftDrawer = document.getElementById("leftDrawer"); var rightDrawer = document.getElementById("rightDrawer"); function toggle(evt){ position++; if(position % 3 == 0){ leftDrawer.classList.remove("open"); rightDrawer.classList.remove("open"); }else if(position % 3 == 1){ leftDrawer.classList.add("open"); rightDrawer.classList.remove("open"); }else{ leftDrawer.classList.remove("open"); rightDrawer.classList.add("open"); } } var size = { width: window.innerWidth, height: window.innerHeight } mainPanel.addEventListener("click",toggle); leftDrawer.addEventListener("click",toggle); rightDrawer.addEventListener("click",toggle); </script>

1) 1000px 이상

2) 600~1000px

- 클릭시 주황 부분이 나옴

3) 600px

'Front-End > LayoutPattern' 카테고리의 다른 글

[CSS] 작은 변화 패턴(Tiny Tweaks) (0)	2016.12.18
[CSS] 레이아웃 시프트 패턴(Layout shifter) (0)	2016.12.18
[CSS] 단 드롭 패턴 (Column Drop) (0)	2016.12.18
[CSS] 가변 그리드 패턴(Fluid Grids) (0)	2016.12.18

리딩리드

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30