본문 바로가기
css

css로 반응형 메뉴 만들기 off canvas (left)

by 지구별에 2015. 2. 13.

 

 

css로 반응형 메뉴 만들기 off canvas (left)

 

지난 시간엔 select 요소로 드롭다운 메뉴를 만들었어요.

 

반응형 메뉴 만들기(select 태그를 이용)

 

오늘은 반응형 메뉴 중 off canvas 메뉴를 배워보겠습니다.

 

캔버스란 화폭을 말하죠. off canvas란 화폭 밖으로 분리된 것이라 보면 되겠습니다.

 

화면이 축소될 때 메뉴 아이콘이 등장히고, 아이콘을 클릭하면 메뉴바가 나타나며  본문을 밀어내는

 

형식입니다.

 

아래 이미지를 보고 A화면→B화면→C화면 순으로 코드 작성을 해 보세요

 

 A 화면

 

 B 화면

 

 C 화면

 

 

전체 html

<label for="menu" onclick>&#8801;</label>                 /*메뉴 아이콘*/
<input type="checkbox" id="menu">                            /*체크박스*/

 

<div id="nav">                                                         /*메뉴*/
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Guest</a></li>
<li><a href="#">Notice</a></li>
</ul>
</div>
 
<div id="content">본문</div>                                      /*본문*/

 

접이식 메뉴를 만들 때 label와 체크박스를 이용하는 법을 배웠지요.

 

css로 토글 메뉴 만들기(메뉴 열고 닫기)

 



input type="checkbox"로 체크박스를 만들고, label 요소는 이 체크박스의 이름표 역할입니다.

 

하지만 이 이름표 대신에 메뉴 아이콘 &#8801; 을 넣을 생각이에요.

 

 &#8801;는 특수기호를 표시하게 해주는 html 코드라고 생각하시면 돼요.

 

html 화면에서 이 코드를 입력하면 웹브라우저에서 특수 기호로 표시됩니다.

 

<div id="nav"> </div> 부분은 메뉴 목록을 담고 있습니다.

 

전체 css     

#nav, #content{background-color:#ccc;margin:5px; padding:5px;}  /*메뉴와 본문 배경색, 여백지정*/
ul{margin:0; padding:0; list-style:none;}                                      /*목록 여백 초기화, 머리 기호 없애기*/
ul > li{display:inline;}                                                                /*메뉴 목록 수평으로*/
label, #menu{display:none;}                                                      /*메뉴 아이콘과 체크박스 숨김*/

 


@media screen and (max-width: 44em)                                       /*화면 너비 44em 이하에서 스타일 적용*/
{
label {display: block;}                                                              /*메뉴 아이콘 드러내기*/
#nav{position: absolute;left: -20em; width: 10em;}  /*메뉴 위치: 왼쪽으로 -20em절대 위치, 너비 10em*/

ul > li{display:block;}                                                              /*메뉴 목록 수직으로*/
input:checked ~ #nav{left: 0;}                                                  /*아이콘 클릭시 메뉴 위치가 left:0으로 이동*/
input:checked ~ #content {margin-left: 10.5em; margin-right: -10.5em;} /*동시에 본문 위치가 이동*/
}

 

화면이 44em이하로 축소되기 전에는 메뉴바가 나타나 있고, 메뉴 목록은 일렬로 늘어 놓은 형태입니다.

 

ul > li{display:inline;}

 

메뉴 아이콘과 체크박스는 숨김 상태가 되어야 합니다.

 

label, #menu{display:none;}                                                     

 

44em이하가 되면, 메뉴 아이콘이 생성되고

 

label {display: block;}   

 

메뉴도 나타납니다. 하지만 아이콘을 클릭하기 전까지는 왼쪽으로 마이너스 값을 주어 화면에서 숨겨놓습니다.

 

#nav{position: absolute;left: -20em; width: 10em;} 

 

메뉴 목록은 일렬이 아닌 수직 형태로 나타납니다

 

ul > li{display:block;}     

 

아이콘을 클릭하면(체크 상태) 메뉴 위치가 마니너스 값(left:-20em) 에서 left:0으로 바뀌며,

너비 10em 인 메뉴 목록이 등장합니다.

 

input:checked ~ #nav{left: 0;}

 

동시에, 본문 위치 역시 메뉴 옆으로 이동합니다.

 

input:checked ~ #content {margin-left: 10.5em; margin-right: -10.5em;}

 

이때 본문의 margin-left 값은, 메뉴의 너비값(width:10em)+여백값(0.5정도) = 10.5em 입니다.

 

margin-right값은 margin-left 의 음수값(-10.5em)로 지정해 주면 본문 내용이 적절한 크기로 나옵니다.

 

소스는 아래 파일 다운받아 실행해 보세요

 

offcanvas menu.html

 

모바일 사파리와 안드로이드에서 작동하지 않을 때 아래 링크 참조해주세요.

 

css로 토글 메뉴 만들기(메뉴 열고 닫기)

 

소스 참조 사이트 : Responsive Menu Concepts

 

 

:checked 선택자를 이용한 토글 버튼

 

[css] 미디어 쿼리, @media query 이해하기

 

반응형 웹사이트(소스) 만들기 연습

 

 

 

반응형

댓글