menu - 折りたたみ時のナビゲーションのドロップダウン メニューを選択します

Question

小さいビューポートでブートストラップが折りたたまれたときに折りたたまれた 3 行のナビゲーション ボタンは好きではありません。ナビゲーションバーの折りたたみを選択ドロップダウンメニューにし、右上以外のページ上の別の場所に配置する方法はありますか? このように: http://filamentgroup.com/examples/rwd-nav-patterns/

Answer 1

フィラメント グループのサイトで何が起こっているかを見ると、特定の幅を下回るとボディがクラスnav-menuを取得し、サイズが大きくなると if が削除されることがわかります。これは、コメント付きの完全な 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;
  }   
}

それが役立つことを願っています!