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

 

 

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

 

미디어 쿼리를 이용해서, 반응형 웹사이트 만들기 연습해 보고 있습니다.

 

지난 시간에는 숨김 메뉴를 드러낼 때, hover 선택자로 마우스 오버할 때만 메뉴가 생성되었는데요...

 

CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게

 

css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장)

 

 

오늘은 메뉴 아이콘을 클릭했을 때 메뉴가 보이고, 다시 한 번 더 클릭하면

 

사라지는 방식을 배워볼게요.  영어로 toggle menu(토글 메뉴)라고도 하며

 

자바스크립트나 jquery를 이용한 방법도 있는데,

 

오늘은 css로만 만들어 보겠습니다.

 

 

html 소스

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

 

<ul id="nav" >                                        /*메뉴*/
<li><a href="#">Home</a> &#10072;</li>
<li><a href="#">Guest</a> &#10072;</li>
<li><a href="#">Noitce</a></li>
</ul>

 

[html] label 태그

 

input type 속성

 

 

label 요소는 체크박스를 설명하는 이름표 역할을 하는데요. 이 자리에 메뉴 아이콘을 넣습니다.

 

이름표를 클릭했을 때 체크박스도 같이 선택되고, 다시 클릭하면 선택이 해제 됩니다.

 

 

 

 

css

#nav{margin:0; padding:0; list-style:none;display:inline;}  /*목록 여백 초기화, 머리기호 없애기, 메뉴 일렬로*/
#nav li {display:inline;}                                                 /*메뉴 목록 일렬로*/

 

▶실행 화면

 

체크박스는 label 때문에 만들었을 뿐, 실상 쓰임은 없으므로 숨겨 두겠습니다

 

메뉴도 아이콘을 클릭했을 때만 표시하도록 숨겨 볼게요

 

css

#nav, #toggle {display:none;}

 

▶실행 화면

 

 

이제 아이콘을 클릭했을 때 메뉴를 드러내도록 하겠습니다.

 

또 다시 클릭 하면 메뉴가 다시 사라지도록이요

 

css

#toggle:checked + #nav{display: inline;}

 

[css3] :checked 가상 클래스

 

▶실행 화면

 

전체 css

#nav{margin:0; padding:0; list-style:none;display:inline;}
#nav li {display:inline;}
#nav, #toggle {display:none;}
#toggle:checked + #nav{display: inline;}

 

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

 

 

basic toggle.html

 

 

이 소스를 응용해서, 지난 시간에 배운 반응형 웹사이트의 메뉴를 만들어 보세요~

 

 

※주의

 

 

체크박스의  단점

 

1. 모바일 사파리 iOS 6.0 이하에서 작동하지 않음

 

버그 때문에 label 클릭이 되지 않음. 

 

해결책 :  label에 빈 onclick을 추가하는 것.

 

<!-- iOS 버그 교정-->

 

<label for="toggle" onclick></label>

<input type="checkbox" id="toggle">

2. 안드로이드 브라우저 android 4.1.2 이하에서 작동하지 않음.

예전엔 webkit 에서, 형제(+)/일반(~) 선택자와 가상 클래스와 결합할 때 버그가 있었는데,

 

체크박스 핵은  형제 선택자와 가상 클래스 :checked를 사용하기 때문.

버그는 webkit 535.1(chrome 13)부터 교정되었는데,

 

안드로이드 4.1.2의 실제 웹킷은 534.30이기 때문에, 구 안드로이드 장치에서

 

작동하지 않음.

 

해결책: body 요소에 webkit만의 가짜 애니메이션을 추가하는 것.

/* Android 버그 교정 */
body {
  -webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
  from { padding: 0; }
  to { padding: 0; }
}

 

출처 : http://css-tricks.com/responsive-menu-concepts/ 

 

 

 

http://www.outofscope.com/css-only-menu-toggle-no-javascript-required/

 

위 사이트를 참고로 했습니다.