Question

当bootstrap折叠为较小的视口时，我不喜欢折叠的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;
  }   
}

希望有所帮助！

选择下拉菜单以便在折叠时导航

1 个答案: