반응 형 네비게이션을 만드는 법

가장 까다로운 부분 중 하나 책임감있는 웹 사이트에 “네비게이션”, 이 부분은 방문자가 웹 페이지를 뛰어 넘는 방법 중 하나이기 때문에 웹 사이트 접근성에 정말로 중요합니다..

반응 형 웹 사이트 탐색을 생성하는 방법은 실제로 많습니다. 심지어 몇 번째 jQuery 플러그인도 초 단위로 사용할 수 있습니다..

그러나 인스턴트 솔루션을 적용하기보다는이 게시물에서 우리는 지상에서 간단한 탐색을 만드는 법 CSS3 미디어 쿼리와 작은 jQuery를 사용하여 스마트 폰과 같은 작은 화면 크기로 제대로 표시합니다..

그럼 시작하자..

• 데모
• 소스 다운로드

HTML

우선 메타 뷰포트를 머리 꼬리표. 이 메타 뷰포트 태그는 Google 페이지가 모든 화면 크기, 특히 모바일 뷰포트에서 올바르게 확장되어야합니다..

... 내비게이션 마크 업으로 다음 스 니펫을 추가하십시오. 신체 꼬리표.

위에서 볼 수 있듯이 여섯 개의 기본 메뉴 링크가 있으며 그 뒤에 하나의 링크가 추가되었습니다. 이 추가 링크는 손잡이 메뉴 탐색이 작은 화면에 숨겨져있을 때.

추가 읽기 : 뷰포트 메타 태그를 잊지 마세요..

스타일

이 섹션에서는 탐색 스타일 지정을 시작합니다. 여기 스타일은 장식 만하고, 원하는대로 색상을 고를 수 있습니다. 그러나이 경우 우리는 (나는 개인적으로) 신체 부드럽고 크림 같은 색으로.

 body background-color : # ece8e5;  

그만큼 항해하다 태그가 탐색을 정의합니다. 100 % 브라우저 창의 전체 너비, ul 기본 메뉴 링크가 포함 된 위치 600px 너비.

 nav 높이 : 40px; 너비 : 100 %; 배경 : # 455868; 글꼴 크기 : 11pt; font-family : 'PT Sans', Arial, sans-serif; font-weight : bold; 위치 : 상대적; 테두리 아래 : 2 픽셀 고체 # 283744;  nav ul 패딩 : 0; 여백 : 0 자동; 너비 : 600px; 높이 : 40px;  

그러면 우리는 흙손 메뉴가 왼쪽으로 연결되어 가로로 나란히 표시되지만 요소를 떠 다니면 부모 축소가 발생합니다..

 nav li 디스플레이 : 인라인; 왼쪽으로 뜨다;  

위의 HTML 마크 업에서 알 수 있듯이 이미 추가 된 클리어 픽스 ~ 안에 수업 둘 다에 대한 속성 항해하다 과 ul 이 CSS clearfix hack을 사용하여 요소를 플로팅 할 때 주위를 정리할 수 있습니다. 이제 스타일 시트에 다음 스타일 규칙을 추가해 보겠습니다..

 .clearfix : before, .clearfix : after content : ""; 전시 : 테이블;  .clearfix : after clear : both;  .clearfix * zoom : 1;  

우리는 6 개의 메뉴 링크가 있고 우리는 또한 컨테이너를 지정했습니다. 600px, 각 메뉴 링크에는 100px 너비.

 color : #fff; 디스플레이 : 인라인 블록; 너비 : 100px; 텍스트 정렬 : 가운데; 텍스트 장식 : 없음; 선 높이 : 40px; 텍스트 그림자 : 1px 1px 0px # 283744;  

메뉴 링크는 1px 오른쪽 경계선, 마지막 경계선 제외. 상자 모델에 대한 이전 게시물을 기억하십시오. 메뉴의 너비가 확장됩니다. 1px 그것을 만들기 101px 국경 추가로, 그래서 여기에 우리는 상자 크기 ~에 모델하다 국경 상자 메뉴를 유지하려면 100px.

 nav li a border-right : 1px solid # 576979; 박스 크기 : border-box; -moz-box-sizing : 테두리 상자; -webkit-box-sizing : border-box;  nav li : 마지막 자식 a border-right : 0;  

다음으로, 메뉴가있을 때 메뉴의 색상이 밝아집니다. : 마우스 오버 또는 :유효한 상태.

 nav a : 호버 (hover), nav a : 활성 background-color : # 8c99a4;  

... 마지막으로 추가 링크가 숨겨집니다 (데스크톱 화면 용)..

 # 빠르다 display : none;  

이 시점에서 우리는 탐색 스타일 만 지정하고 브라우저 창 크기를 조정할 때 아무 것도 발생하지 않습니다. 그럼 다음 단계로 넘어 갑시다..

추가 읽기 : CSS3 박스 크기 조정 (Hongkiat.com)

미디어 쿼리

CSS3 미디어 쿼리는 스타일이 특정 중단 점 또는 특정 장치 화면 크기에서 어떻게 이동할지 정의하는 데 사용됩니다.

우리의 탐색은 처음부터 600px 고정 폭, 스타일을 처음 볼 때 정의합니다. 600px 또는 화면 크기가 작아 실질적으로 말하기, 이 첫 번째 중단 점입니다..

이 화면 크기에서는 두 개의 메뉴 링크가 나란히 표시되므로 ul여기 너비가 될거야. 100 % 메뉴 링크가있는 동안 브라우저 창의 50 % 너비.

 @ 미디어 화면 및 (최대 너비 : 600 픽셀) nav 높이 : 자동;  nav ul width : 100 %; 디스플레이 : 블록; 높이 : 자동;  nav li 너비 : 50 %; 왼쪽으로 뜨다; 위치 : 상대적;  nav li a border-bottom : 1px solid # 576979; 국경 - 오른쪽 : 1px 고체 # 576979;  nav a 텍스트 정렬 : 왼쪽; 너비 : 100 %; 텍스트 들여 쓰기 : 25px;  

... 그리고 화면이 작아 질 때 탐색이 표시되는 방법을 정의합니다. 480px 또는 더 낮습니다 (그래서 이것은 우리의 두 번째 중단 점입니다).

이 화면 크기에서는 이전에 추가 한 추가 링크가 표시되기 시작하고 링크에 “메뉴” 아이콘을 사용하여 오른쪽에 :후 의사 요소, 기본 메뉴 링크는 화면에 더 많은 수직 공간을 저장하기 위해 숨겨집니다.

 @ 미디어 전용 화면 및 (최대 너비 : 480 픽셀) nav border-bottom : 0;  nav ul display : none; 높이 : 자동;  nav a # pull display : 블록; 배경색 : # 283744; 너비 : 100 %; 위치 : 상대적;  nav a # pull : after content : ""; 배경 : url ( 'nav-icon.png') no-repeat; 너비 : 30px; 높이 : 30px; 디스플레이 : 인라인 블록; 위치 : 절대; 오른쪽 : 15px; 상단 : 10px;  

마지막으로, 화면이 작아지면 320px 메뉴가 수직으로 아래에서 아래로 표시됩니다..

 @ 미디어 전용 화면 및 (최대 너비 : 320 픽셀) nav li display : block; float : none; 너비 : 100 %;  nav li a border-bottom : 1px solid # 576979;  

이제 브라우저 창 크기를 조정할 수 있습니다. 이제 화면 크기를 조정할 수 있어야합니다..

추가 읽기 : 표준 장치에 대한 미디어 쿼리.

메뉴 표시

이 시점에서 메뉴는 계속 숨겨지며 메뉴를 두드 리거나 클릭하여 필요할 때만 표시됩니다. “메뉴” 우리는 jQuery를 사용하여 효과를 얻을 수있다. slideToggle ().

 메뉴 (menu) = menu.height (); $ (pull) .on ( 'click', function (e)); e.preventDefault (); menu.slideToggle (););); 

그러나 방금보기 및 작은 화면에서 숨겨진 브라우저 창 크기를 조정하면 메뉴는 숨겨진 상태로 유지됩니다. 표시 : 없음 jQuery에 의해 생성 된 스타일은 여전히 ​​요소에 첨부되어있다..

따라서 다음과 같이 창 크기를 조정할 때이 스타일을 제거해야합니다.

 $ menu ( ': hidden')) menu.removeAttr ( 'style'); $ (window) .resize (function () var w = $ (window) ); 

자, 이제 그 코드가 모두 필요합니다. 다음 링크에서 내비게이션을 볼 수 있으며 Responsinator와 같은 반응 형 디자인 테스트 도구에서 테스트하여 다양한 폭으로 한 번에 볼 수 있습니다..

• 데모
• 소스 다운로드

보너스 : 대체 방법

이 글의 앞 부분에서 언급했듯이, 다른 방법으로 자바 스크립트 라이브러리를 사용하고 있습니다. SelectNav.js 가장 쉬운 방법 중 하나입니다.. 이것은 jQuery와 같은 다른 제 3 자 라이브러리에 의존하지 않는 순수한 JavaScript입니다..

기본적으로, 그것은 당신의 목록 메뉴를 복제하고 그것을 드롭 다운 메뉴를 선택하면 미디어 쿼리를 통해 화면 크기에 따라 숨김 또는 표시 할 항목을 선택할 수 있습니다.

이 연습에서 내가 좋아하는 장점 중 하나는 탐색 스타일을 걱정할 필요가 없다는 것입니다.

메뉴는 기기 자체의 기본 사용자 인터페이스를 사용합니다..

추가 구현을 위해 공식 문서를 참조하십시오..

결론

우리는 처음부터 반응적인 네비게이션을 생성하기 위해 모든 방법을 통해 왔습니다. 여기에 우리가 만든이 예제는 예제 중 하나에 불과합니다. 앞에서 언급했듯이 위에 표시된 것처럼 다른 여러 가지 솔루션이 있습니다. 따라서 이제는 요구 사항을 충족시키는 데 가장 적합한 방법을 선택하고 웹 사이트 탐색 구조를 선택하는 결정을 내립니다.