이 jQuery 플러그인을 사용하여 더욱 반응이 빠른 탐색 메뉴 만들기
모든 현대 사이트에는 반응 형 레이아웃 및 사용 가능한 탐색. 주어진 것입니다..
그러나 햄버거 메뉴는 지금까지만 갈 수 있습니다. 근본적으로 유용성을 바꾼다. 화면 크기가 다양합니다. 이를 처리하는 더 좋은 방법은 다음과 같습니다. 점진적으로 링크 숨기기 와 같은 플러그인으로 OkayNav.
이 무료 jQuery 플러그인 매우 간단한 메뉴 기능을 추가합니다. 모든 페이지 및네비게이션 항목을 과도하게 숨 깁니다., 다른 뷰포트를 기반으로합니다. 이렇게하면 스마트 폰 사용자는 단일 햄버거 메뉴를 사용할 수 있지만 태블릿 사용자는 몇 개의 링크를 볼 수 있습니다..
기본적으로, 그것은 요소 및 긴 정렬되지 않은 목록. 지금까지이 플러그인이 다중 레벨 드롭 다운을 지원하지 않는다고 생각하지만 jQuery를 조금만 알고 있다면 직접 추가 할 수 있습니다.
OkayNav는 매우 간단하며 더 간단한 웹 사이트를위한 그것은 단지 소수의 탐색 링크를 가지고 있습니다. 이 링크들 오프 스크린 메뉴 뒤에 서서히 숨어있다. 특정 뷰포트를 더 많은 링크 숨기기 유지 브라우저가 작아 질수록.
너는 ~해야 할거야. 정렬되지 않은 목록을 래핑합니다. 탐색 요소에 특정 ID를 부여합니다. 그런 다음 전체 탐색 대상으로 지정 와 더불어 okayNav ()
다음과 같은 함수 :
var navigation = $ ( '# nav-main'). okayNav ();
이것이 단지 가장 간단한 설정 맞춤 기능이 없습니다. 함께 일할 수 있습니다. 12 개 이상의 맞춤 옵션 이 라이브러리에 내장되어 아이콘 스타일, 메뉴 애니메이션, 스 와이프 지원 및 콜백 함수를 제어합니다..
메뉴를 호출 할 수도 있습니다. 마음대로 열거 나 닫으십시오. 특정 값을 함수에 전달합니다. 다음은 간단한 예제입니다. 내비게이션 열기:
navigation.okayNav ( 'openInvisibleNav');
이 코드는 모두 GitHub 레포 스크립트의 다운로드도 포함됩니다. CDN 경로를 선호하는 경우 RawGit 링크 GitHub에서이 스크립트를 직접 추가하는 방법.
오케이 네브 소규모 사이트에 적합 프로그레시브 네비게이션 기술의 혜택을 누릴 수 있습니다. 그러나이 작동 방식을 여전히 잘 모르는 경우 CodePen에서이 작은 플러그인이 할 수있는 것을 보여주는이 데모를 확인하십시오..