축소 붕괴를위한 드롭 다운 메뉴 선택

Question

더 작은 뷰포트를위한 부트 스트랩이 축소되면 축소 된 3 줄 탐색 버튼의 팬이 아닙니다. 선택한 드롭 다운 메뉴로 Navbar 축소를 가져올 수있는 방법이 있습니까?뿐만 아니라 오른쪽 상단 이외의 페이지에 다른 위치에 배치 할 수 있습니까? 다음과 같이하십시오 : http://filamentgroup.com/examples/rwd-nav-patterns/

Answer 1

필라멘트 그룹 사이트에서 일어나는 일을 살펴보면, 특정 너비 아래에서 본문이 클래스 nav-menu을 얻고 크기가 더 큰 경우를 제거 할 수 있음을 알 수 있습니다. 이 의견들은 RWD-nav.js 완료 :

자신의 RWD-nav.css에서 다음

jQuery(function($){ 
$('.nav-primary') 
    // test the menu to see if all items fit horizontally 
    .bind('testfit', function(){ 
    var nav = $(this), 
    items = nav.find('a'); 

    $('body').removeClass('nav-menu');      

    // when the nav wraps under the logo, or when options are stacked, display the nav as a menu    
    if ((nav.offset().top > nav.prev().offset().top) || ($(items[items.length-1]).offset().top > $(items[0]).offset().top)) { 

     // add a class for scoping menu styles 
     $('body').addClass('nav-menu'); 
    };      
}) 

// toggle the menu items' visiblity 
.find('h3') 
    .bind('click focus', function(){ 
     $(this).parent().toggleClass('expanded') 
    }); 

    // ...and update the nav on window events 
    $(window).bind('load resize orientationchange', function(){ 
    $('.nav-primary').trigger('testfit'); 
}); 

}); 

이는 데 도움이

/* Media queries 
------------------------------ */ 

@media screen and (min-width: 640px) { 
    .nav-primary, 
    .nav-primary ul { 
    float: left; 
    } 
    .nav-primary ul { 
    float: left; 
    } 
    .nav-primary li { 
    float: left; 
    font-size: 1.5em; 
    border-bottom: 0; 
    } 
} 

@media screen and (min-width: 910px) { 
    .nav-primary { 
    float: right; 
    clear: none; 
    } 
} 

폭 희망에 따라 재배치한다!