Bootstrap 응답 식 탐색

2061 단어
응답 식 네 비게 이 션 (Responsive Nav) 은 아주 작은 JavaScript 플러그 인 으로 압축 된 후에 1.7KB 만 있 으 면 작은 화면 에 대한 전환 식 네 비게 이 션 을 만 들 수 있 습 니 다.터치 스크린 이벤트 와 CSS 3 과도 (transitions) 효 과 를 지원 하 며 매우 좋 은 성능 을 가지 고 있 습 니 다.그 는 height: 0 에서 height: auto 로 넘 어 가 는 것 도 지원 할 수 있다. 이것 은 CSS 3 과도 효과 에서 쉽게 실현 되 지 않 는 다.
응답 식 내 비게 이 션 장점:
    1.7 KB。
           。
  CSS3  (transitions)  、    ,         HTML    。
                   300ms  。
   CSS3  (transitions)   height: auto    。
                  ,         ,          JavaScript       。
         、          ,  IE6+。

작업: (1) 파일 도입



(2) 태그 추가


(3) 이 플러그 인 시작


  var navigation = responsiveNav("#nav");


(4) 매개 변수 조정
var navigation = responsiveNav("#nav", { // Selector: The ID of the wrapper
  animate: true, // Boolean:     CSS    (transitions), true   false
  transition: 400, // Integer:          ,   (millisecond)   
  label: "Menu", // String: Label for the navigation toggle
  insert: "after", // String: Insert the toggle before or after the navigation
  customToggle: "", // Selector: Specify the ID of a custom toggle
  openPos: "relative", // String: Position of the opened nav, relative or static
  jsClass: "js", // String: 'JS enabled' class which is added to  el
  debug: false, // Boolean: Log debug messages to console, true   false
  init: function(){}, // Function: Init callback
  open: function(){}, // Function: Open callback
  close: function(){} // Function: Close callback
});

(5) 호출 가능 한 방법
//     
navigation.destroy();

// Toggle
navigation.toggle();

좋은 웹페이지 즐겨찾기