menu - 选择折叠时导航的下拉菜单

Question

当引导程序为较小的视口折叠时，我不喜欢折叠的 3 行导航按钮。有没有办法让导航栏折叠到选择下拉菜单，以及将其放置在页面上的其他位置，而不是右上角？就像这样： http: //filamentgroup.com/examples/rwd-nav-patterns/

Answer 1

查看 filamentgroup 站点上发生的情况，您可以看到，在某个宽度以下，body 会获取类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;
  }   
}

希望有帮助！