반응형 메뉴 만들기(select 태그를 이용)
어제는 체크박스와 :checked 선택자를 이용하여 토글 메뉴 만드는 법을 배웠습니다.
오늘은 select 요소를 이용하여, 반응형 메뉴를 만들어 보겠습니다.
select 요소는 드롭다운 목록 만들 때 사용하며, 각 선택 항목은 option을 사용합니다.
▶전체 html
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Guest</a></li>
<li><a href="#">Notice</a></li>
</ul>
<select onchange="if (this.value) window.location.href = this.value;">
<option value="#">Home</option>
<option value="#">Guest</option>
<option value="#">Notice</option>
</select>
</div>
<div id="contents">본문</div>
우선 메뉴 목록을 만드는 것은 지난 시간에 배운 것과 동일합니다.
그리고, 화면 너비가 25em 이하에서는 드롭다운 목록이 나올 수 있도록 select를 이용하여
새로운 목록을 구성합니다.
<select onchange="if (this.value) window.location.href = this.value;">
<option value="#">Home</option>
<option value="#">Guest</option>
<option value="#">Notice</option>
</select>
onchange="if (this.value) window.location.href = this.value 이 부분은 자바스크립트인데
select를 작동시키기 위해 필요합니다. select에 onchange 이벤트가 발생하면 window.location.href로 주소를
바꾼다는 뜻이라네요 (http://css-tricks.com/responsive-menu-concepts/참조)
option태그는 value 속성과 함께 쓰는데 value값은 서버로 전송되는 값입니다. home, guest, notice를 넣으면 됨.
▶ 전체 css
ul{margin:0; padding:0; listy-style:none;} /*목록 여백 초기화, 머리 기호 없애기*/
ul li{display:inline;} /*목록을 일렬로 늘어놓기*/
select {display:none;} /*select 창 숨기기*/
@media screen and (max-width: 25em) /*화면 너비 25em 이하일 경우 스타일 적용*/
{
ul {display:none;} /*초기 메뉴 숨기기*/
select {display:block; width:100%;} /*select 창 드러내기, 가로 너비 100%로*/
}
우선 select 메뉴를 숨겨둡니다.
그리고 화면 너비가 25em 이하일 경우 기존의 메뉴바를 숨기고
ul {display:none;}
select 창이 보이도록 합니다. (화먼 너비 전체를 차지하게)
select {display:block; width:100%;}
▶ 실행화면
화면 너비 25em 이상일 경우
화면 너비 25em 이하일 경우(파이어폭스)
화면 너비 25em 이하일 경우(구글 크롬)
다양한 크기에서 테스트 해 보기
위 화면을 보면 [반응형 웹 디자인 보기]를 설정하여, 화면 크기별로 어떻게 보이는지 확인해 볼 수 있습니다.
구글 크롬과, 파이어폭스 브라우저에서 개발자도구를 설치한 후
마우스 오른쪽 [요소검사] 선택후 위 이미지에서 빨간색 사각 아이콘을 클릭하면 됩니다.
개발자도구 사용법은 아래 링크 참조하시면 자세히 나와 있어요
'css' 카테고리의 다른 글
[css] cursor 속성 (마우스 모양 선택) (2) | 2015.02.23 |
---|---|
css로 반응형 메뉴 만들기 off canvas (left) (0) | 2015.02.13 |
[css] :checked 선택자를 이용한 토글 버튼 (0) | 2015.02.11 |
css로 토글 메뉴 만들기(메뉴 열고 닫기) (3) | 2015.02.10 |
css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) (0) | 2015.02.06 |
댓글