Menu 选择“收拢时导航”的下拉菜单

我不喜欢在引导程序为较小的视口折叠时折叠的3行导航按钮。是否有办法将导航栏折叠到选择下拉菜单，并将其放置在页面的右上角以外的其他位置？就像这样：

查看FibreamGroup站点上发生的情况，您可以看到，在某个宽度以下，body会获得class

nav菜单，如果尺寸较大，则会删除。这是他们的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;
  }   
}

希望有帮助
 可能重复的