選擇下拉菜單進行摺疊導航

Question

當引導程序摺疊爲較小的視口時，我不是摺疊3行導航按鈕的粉絲。有沒有辦法讓導航欄崩潰到選擇下拉菜單，並將其放在頁面上的其他位置，而不是右上角？就像這樣：http://filamentgroup.com/examples/rwd-nav-patterns/

Answer 1

看看在燈絲組網站上會發生什麼，你可以看到低於一定的寬度，正文獲得類nav-menu，並且當尺寸更大時，它將被移除。這是他們的RWD-nav.js完整的評論：

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'); 
}); 

}); 

然後在他們的RWD-nav.css，這種重新定位基於寬度

/* 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; 
    } 
} 

希望幫助！