반응 형 자바 스크립트 탐색 메뉴 만들기

반응 형 웹 디자인 (RWD)는 우리 산업이 다양한 장치를위한 웹 사이트와 애플리케이션을 개발하는 방법에 엄청난 영향을 미쳤습니다. 우리가 보는 곳마다 주제에 대한 새로운 기술, 도구 및 생각이 있습니다. RWD는 사용자가 보유한 다양한 장치에 대한 멋진 경험을 만드는 데 필요한 도구를 제공합니다.

Ethan Marcotte의 원본 기사 반응 형 디자인의 세 가지 핵심 요소 인 유동 격자, 유연한 이미지 및 미디어 쿼리를 설명합니다. JavaScript는 이러한 RWD의 기초 중 하나가 아니지만 개발자는 상호 작용을 향상시키고 사용자를위한 더 풍부한 경험을 만들 수 있습니다. 많은 사람들 (저를 포함하여)은 JavaScript를 활성화하지 않은 사용자가 우리 콘텐츠를 사용할 수 있어야한다고 주장합니다. 이것은 우리가 웹 사이트를 더 유용하게 만들기 위해 JavaScript를 사용하는 것과 JS 벽 뒤에 콘텐츠를 숨기는 것 사이에 미세한 경계를 밟는 곳입니다.



  • 얻기 소스 파일 이 튜토리얼을 위해

RWD 용 JavaScript를 작성하는 데 시간을 할애한다면 다음 작업을 보게 될 것입니다. 스콧 옐필라멘트 그룹 . 반응 형 디자인을 발전시키는 데 도움이되는 도구를 만들고 공유하는 사람들이 있다는 것은 우리에게 다행입니다.



무언가를 만들어 보자

웹 사이트의 각 섹션에서 얼마나 많은 시간을 소비하는지에 대한 구체적인 분석은 없지만, 일반적으로 다른 측면보다 탐색 (특히 대규모 사이트)에 더 많은 시간을 할애합니다. 올바른 콘텐츠를 확보하고, 콘텐츠가 잘 구성되어 있는지, 접근하기 쉽고, 접근이 용이하며, 우리가 손에 넣을 수있는 모든 장치의 기능을 보장하는 것은 시간이 많이 걸릴 수 있습니다.

jQuery를 사용하여 이벤트 바인딩으로 브라우저 불일치를 쉽게 처리하고 DOM 요소의 클래스를 쉽게 전환 할 수 있습니다.



jQuery를 사용하여 이벤트 바인딩으로 브라우저 불일치를 쉽게 처리하고 DOM 요소의 클래스를 쉽게 전환 할 수 있습니다.

따라서 우리의 삶을 더 쉽게 만들기 위해 반응 형 내비게이션을 구축해 보겠습니다. 이 탐색의 몇 가지 목표는 다음과 같습니다.

  1. 크고 작은 화면에서 잘 작동합니다.
  2. Chrome, Safari, Firefox 및 IE (8+)에서 작동합니다.
  3. JavaScript를 사용하거나 사용하지 않고 작업합니다.

마크 업

튜토리얼의 파일을 사용하지 않는 경우 지금은 최소한 복사 할 수있는 좋은 시간이 될 것입니다. base.css . 여기서 우리는 JavaScript에 초점을 맞추고 있기 때문에 CSS를 많이 보지 않을 것입니다. 계속해서 index.html 파일을 가져옵니다. 튜토리얼 파일에서 시작하겠습니다.

HTML을보고 나면 스스로에게 질문 할 수 있습니다. 바닥 글에 탐색이있는 이유는 무엇입니까? 좋은 질문. 우리의 목표 중 하나는 비 JavaScript 사용자가 탐색을 사용할 수 있도록하는 것이 었습니다. JS가없는 작은 화면을 사용하는 사용자의 경우 페이지를 방문 할 때 내비게이션이 화면을 차지하는 것을 원하지 않습니다. 따라서 머리글에는 바닥 글에있는 (확장 된) 탐색 링크가 있습니다.



메뉴 아이콘을 터치 / 클릭하여 오프 캔버스 요소를 노출 한 후 작은 크기로 탐색

메뉴 아이콘을 터치 / 클릭하여 오프 캔버스 요소를 노출 한 후 작은 크기로 탐색

가장 작은 것 먼저

가장 작은 크기로 시작하여 거기에서 작업하면 일반적으로 반응 형 사이트를 구축하는 것이 훨씬 쉽습니다. 이 시점에서 자바 스크립트를 끈 상태에서 작은 크기로 작동하는 내비게이션이 있어야합니다. Nav 표시 링크 (현재 아무 작업도하지 않음)는 JavaScript가 활성화 된 경우이 크기로, JavaScript를 사용하거나 사용하지 않고 큰 크기에서 간단한 마우스 오버로 작동합니다.

작은 크기의 탐색에 생명력을 불어 넣기 위해 JavaScript를 추가해 보겠습니다. jQuery 및 탐색 JavaScript에 대한 참조를 닫는 본문 태그 바로 앞에 추가해야합니다. index.html .

우리는 다음과 같이 시작할 것입니다. nav.js . 그러면 개체 ( window.NAV ) 탐색을 제어하는 ​​모든 코드를 포함합니다.

(function() { window.NAV = { $body: $('body'), $subMenus: $('.subMenu'), toggle: function(e) { e.preventDefault(); NAV.$body.toggleClass('mainMenu-is-open'); }, bindEvents: function() { $('.js-togglesOffCanvas').on('click', NAV.toggle); }, init: function() { NAV.bindEvents(); } } })(); NAV.init();

그만큼 초기화 위의 방법에는 필요한 모든 설정이 포함되어 있습니다. 여기에 전화 NAV.bindEvents , jQuery를 사용하여 클릭 이벤트를 클래스의 모든 항목에 바인딩합니다. js-togglesOffCanvas , 전화 NAV.toggle 메서드 .

NAV.toggle 기본 이벤트의 발생을 중지하고 (원하지 않는 링크를 따르지 않음) jQuery를 사용하여 mainMenu-is-open 몸에 수업. 이렇게하면 CSS 규칙이 설정되어 .mainNav div (현재 화면 왼쪽에 위치)를 CSS 변환을 사용하여보기로 전환합니다. 사용 translate3d WebKit에서 하드웨어 가속을 강제합니다. 따라서 사용 가능한 것을 감지 할 수 있습니다. 모 더니 저 그리고 사용 translate3d (사용 가능한 경우) 더 부드러운 애니메이션을 위해.

자바 스크립트를 통해 오버레이 div를 강조합니다. 이 div의 클릭 이벤트는 메뉴 닫기 작업에 바인딩됩니다.

자바 스크립트를 통해 오버레이 div를 강조합니다. 이 div의 클릭 이벤트는 메뉴 닫기 작업에 바인딩됩니다.

우리의 이벤트는 클래스에 바인딩되어 있기 때문에 js-togglesOffCanvas , 헤더의 표시 링크에 해당 클래스를 추가해야합니다.

Show Nav

이제 클릭하면 왼쪽에서 작은 크기로 슬라이드되는 내비게이션이 있어야합니다. Nav 표시 링크. 하지만 잠깐만 요 – 탐색을 열었으므로 이제 탐색을 닫을 방법이 없습니다. 수정하겠습니다.

오른쪽으로 밀기 전에 열린 링크가 있던 위치와 동일한 위치에 왼쪽 상단에 버튼이 있어야합니다. 또한 탐색 오른쪽에있는 항목을 클릭하여 닫기를 트리거 할 수 있기를 바랍니다. 오른쪽에있는 모든 항목에 이벤트 리스너를 추가하는 대신 오버레이 div에 드롭하여 클릭을 수신하겠습니다. 마크 업을 저장하고 NAV 개체에 추가 할 JS 변수를 만듭니다.

window.NAV = { $clickOverlay: $(' '), …

그런 다음 초기화 이 div를 DOM에 추가하는 메소드입니다. 이렇게하면 JS가 있고 캔버스 외부 탐색이 활성화 된 경우에만 이것을 추가합니다.

포토샵 CS5에서 배경을 흐리게하는 방법
init: function() { NAV.$clickOverlay.appendTo('body'); NAV.bindEvents(); }

해당 div를 보려면 다음 클래스를 추가하십시오. 명백한: 이 요소는 보이지 않기 때문에 테스트에 도움이 될 수 있습니다. 이제 탐색 자체에 닫기 버튼을 추가 할 좋은 시간입니다. 을 추가하다 바로 안에 :

Close Menu

이제 탐색을 닫을 수 있습니다 (안도감).이 오프 캔버스 상태에서는 2 단계 링크로 이동할 수 없습니다. 몇 가지 변경을 통해 이에 대해 뭔가를 할 수 있습니다. nav.js 파일. 먼저이 메서드를 아닙니다 목적:

toggleSubNav: function(e) { e.preventDefault(); $(this).siblings('ul').stop().slideToggle('fast'); },

다음으로 클릭 핸들러를 추가합니다. .js-togglesSubMenu ...에 NAV.bindEvents .

bindEvents: function() { $('.js-togglesOffCanvas').on('click', NAV.toggle); $('.mainNav').on('click', '.js-togglesSubMenu', NAV.toggleSubNav); },

추가 js-togglesSubMenu 하위 메뉴를 열어야하는 링크에 대한 클래스

    index.html .

  • Products

    이 내비게이션은 이제 실제로 함께 제공되지만 문제가 발생하면 몇 가지 문제를 찾을 수 있습니다. 첫 번째는 오프 캔버스 탐색이 열려 있고 미디어 쿼리 변경으로 인해 레이아웃이 오프 캔버스가 아닌 레이아웃으로 전환 될 때 표시됩니다. 모든 것이 깨진 것 같습니다. 요소에는 여전히 클래스가 있습니다. mainMenu-is-open 적용된. 또한 하위 메뉴를 열고 닫으면 더 큰 크기의 호버 효과가 작동하지 않습니다. 전환이 발생하는 중단 점이 핸드 헬드 장치의 세로 모드와 가로 모드 사이에있는 경우 문제가됩니다.

    오프 캔버스 탐색이 열리고 완전히 확장되어 두 번째 수준 메뉴가 표시됩니다.

    오프 캔버스 탐색이 열리고 완전히 확장되어 두 번째 수준 메뉴가 표시됩니다.

    현재 브라우저는 미디어 쿼리가 상태를 변경할 때 이벤트를 발생하지 않습니다. 그러나 최신 브라우저는 특정 미디어 쿼리가 matchMedia API . 이 경우 래퍼를 사용하겠습니다. mediaCheck , 내가 matchMedia API에 대해 썼습니다. 미디어 쿼리가 활성화되거나 활성화되지 않을 때 실행할 함수를 설정할 수 있습니다. 이를 위해 index.html 바로 전에 mediaCheck에 대한 참조를 추가합니다. nav.js :

    다음으로 코드를 추가하여 mediaCheck 시청할 미디어 쿼리 및 변경시 수행 할 작업 init 끝에 다음 줄을 추가하십시오. 함수() .

    mediaCheck({ media: '(min-width: 35em)', entry: function() { NAV.clear(); } });

    이제 NAV.clear 방법. 제거 mainMenu-is-open 내비게이션이 올바른 위치로 돌아가도록 이동 한 요소를 재설정하고 요소에 추가 된 jQuery 애니메이션에서 인라인 스타일을 제거합니다.

    window.NAV = { $subMenus: $('.subMenu'), clear: function() { NAV.$body.removeClass('mainMenu-is-open'); NAV.$subMenus.removeAttr('style'); } …

    이제 브라우저 너비가 35ems 이상이 될 때마다 mainMenu-is-open 클래스 및 jQuery의 인라인 스타일이 제거됩니다.

    왼쪽 상단부터 시계 방향으로 기기 : Apple iPad, BlackBerry Z10 및 Apple

    왼쪽 상단부터 시계 방향으로 기기 : Apple iPad, BlackBerry Z10 및 Apple의 iPhone 5

    존재하는 또 다른 문제는 탐색이 컨텍스트간에 전환 될 때 오프 캔버스 슬라이딩 애니메이션을 만드는 전환이 여전히 적용된다는 것입니다. 이로 인해 미디어 쿼리간에 상당히 추한 이동이 발생합니다. 다음 방법을 추가하여 첫 번째 문제에 대한 수정을 구축 할 수 있습니다. window.NAV :

    toggleAnimations: function() { if ( APP.getState() === 'small' ) { NAV.$body.addClass('enableAnimations'); } else { NAV.$body.removeClass('enableAnimations'); } },

    수정 mediaCheck 다음과 같이 init 메소드를 호출하십시오.

    mediaCheck({ media: '(min-width: 30em)', entry: function() { NAV.clear(); NAV.toggleAnimations(); }, exit: function() { NAV.toggleAnimations(); } });

    마지막으로 base.css 되려고:

    .enableAnimations .mainNav, .enableAnimations .mainContent, .enableAnimations .masthead, .enableAnimations .clickOverlay {

    이제 전환은 enableAnimations 수업이 있고 그 수업은 작은 크기에만 적용됩니다.

    큰 사이즈의 제품 메뉴를 클릭하면 세 번째 문제를 알 수 있습니다. 이 크기로 두 번째 수준 탐색을 보는 것은 마우스 오버로 처리해야합니다. 더 작은 크기를 처리하기 위해 적용한 클릭 핸들러는 여전히 실행 중입니다.

    Modernizr를 사용하면 CSS 및 JavaScript 결정을 내리는 데 기능 감지를 사용할 수 있습니다.

    Modernizr를 사용하면 CSS 및 JavaScript 결정을 내리는 데 기능 감지를 사용할 수 있습니다.

    이것은 조금 더 까다 롭습니다. 원래 솔루션을 개발했지만 도움을 받아 아담 심슨 크게 개선되었습니다. 보다 app.js 튜토리얼 파일에서 메소드 정의를 볼 수 있습니다. APP.getState , ID가있는 요소를 삽입합니다. SizeTest 페이지에. 이 요소는 CSS에서 스타일을 선택하여 정의 된 미디어 쿼리에 대해 브라우저의 상대적인 크기를 파악하는 데 사용합니다. 추가 app.js index.html 참조 :

    CSS에서 다음 선언을 찾을 수 있습니다 (이것은 약간의 해킹입니다).

    #sizeTest { font-size: 10px; } @media (min-width: 30em) { #sizeTest { font-size: 30px; } }

    APP.getState 확인 글꼴 크기 이 요소의 문자열 (정의 할 수 있음)을 반환합니다. 작은 또는 . 다른 접근 방식을 시도했지만 브라우저 간 / 기기 간 지원이 가장 좋습니다. 그런 다음 JavaScript의 논리 흐름을 제어하는 ​​데 사용할 수 있습니다. NAV.toggleSubNav 된다 :

    toggleSubNav: function(e) { e.preventDefault(); if ( APP.getState() === 'small' ) { $(this).siblings('ul').stop().slideToggle('fast'); } }

    이제 JavaScript 토글은 작은 크기에서만 발생합니다.

    결론

    이 시점에서 거의 모든 곳에서 작동하는 매우 견고한 탐색이 있어야합니다. 더 자세히 알고 싶다면 다음을 권장합니다. 스콧 옐 , 브래드 프로스트Sparkbox : 우리는 JavaScript를 사용하여 반응 형 웹 사이트를 향상시키기 위해 할 수있는 일의 표면에 불과했습니다.

    말: 롭 타르

    이 기사 롭 타르 원래 등장 넷 매거진 문제 245.