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

 

 

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

 

어제는 체크박스와 :checked 선택자를 이용하여 토글 메뉴 만드는 법을 배웠습니다.

 

오늘은 select 요소를 이용하여, 반응형 메뉴를 만들어 보겠습니다.

 

select 요소는 드롭다운 목록 만들 때 사용하며, 각 선택 항목은 option을 사용합니다. 

 

[html] select 태그

 

[html] option 태그

 

▶전체 html

 

<div id="nav">
<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%;} 

 

 

▶ 실행화면

 

select menu.html

 

 

화면 너비 25em 이상일 경우

 

 

 

화면 너비 25em 이하일 경우(파이어폭스)

  

 

화면 너비 25em 이하일 경우(구글 크롬)

 

 

 

다양한 크기에서 테스트 해 보기

 

위 화면을 보면 [반응형 웹 디자인 보기]를 설정하여, 화면 크기별로 어떻게 보이는지 확인해 볼 수 있습니다.

 

구글 크롬과, 파이어폭스 브라우저에서 개발자도구를 설치한 후

 

마우스 오른쪽 [요소검사] 선택후 위 이미지에서 빨간색 사각 아이콘을 클릭하면 됩니다.

 

개발자도구 사용법은 아래 링크 참조하시면 자세히 나와 있어요

 

웹개발자 도구, 웹 디벨로퍼 툴바 설치/제거 방법

 

웹 개발자 도구 web developer toolbar 개관