響應式Navbar與Sub Navbar

Question

美好的一天，

原諒我，因爲我的導航詞彙不是最好的。如果這個問題令人困惑，我表示歉意。

我的工作，需要在768px以上在頁面上居中導航欄上。導航中的項目打開（或可能切換）直接位於下面的subnav。這些導航也應該出現在頁面的中心。

我已經能夠通過導航欄的響應部分工作，其主要項目垂直對齊和每個項目的子導航菜單鋪開下面，我給他們的縮進了一段距離。這很好。

不過，我的問題是不敏感的一面，但在寬度行爲大於768px。會發生什麼是切換菜單的子導航將其他主要項目按下子導航下的頁面。

這裏是我的代碼：

$(document).ready(function() { 
 

 
    //stick in the fixed 100% height behind the navbar but don't wrap it 
 
    $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>')); 
 
    
 
    $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>')); 
 

 
    // Enter your ids or classes 
 
    var toggler = '.navbar-toggle'; 
 
    var pagewrapper = '#page-content'; 
 
    var navigationwrapper = '.navbar-header'; 
 
    var menuwidth = '100%'; // the menu inside the slide menu itself 
 
    var slidewidth = '80%'; 
 
    var menuneg = '-100%'; 
 
    var slideneg = '-80%'; 
 

 

 
    $("#slide-nav").on("click", toggler, function (e) { 
 

 
     var selected = $(this).hasClass('slide-active'); 
 

 
     $('#slidemenu').stop().animate({ 
 
      left: selected ? menuneg : '0px' 
 
     }); 
 

 
     $('#navbar-height-col').stop().animate({ 
 
      left: selected ? slideneg : '0px' 
 
     }); 
 

 
     $(pagewrapper).stop().animate({ 
 
      left: selected ? '0px' : slidewidth 
 
     }); 
 

 
     $(navigationwrapper).stop().animate({ 
 
      left: selected ? '0px' : slidewidth 
 
     }); 
 

 

 
     $(this).toggleClass('slide-active', !selected); 
 
     $('#slidemenu').toggleClass('slide-active'); 
 

 

 
     $('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active'); 
 

 

 
    }); 
 

 

 
    var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header'; 
 

 

 
    $(window).on("resize", function() { 
 

 
     if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) { 
 
      $(selected).removeClass('slide-active'); 
 
     } 
 

 

 
    }); 
 

 
});

\t .containerFluid { 
 
\t width: 1280px; 
 
\t margin: 0 auto; 
 
\t } 
 
\t 
 
\t @media (max-width:767px) { 
 
\t .subMenuDiv { 
 
\t  position: realtive; 
 
\t } 
 
\t } 
 
\t 
 
\t body.slide-active { 
 
\t overflow-x: hidden 
 
\t } 
 
\t /*first child of #page-content so it doesn't shift around*/ 
 
\t 
 
\t .no-margin-top { 
 
\t margin-top: 0px!important 
 
\t } 
 
\t 
 
\t #slide-nav .navbar-toggle .icon-bar { 
 
\t background: white; 
 
\t } 
 
\t /*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */ 
 
\t 
 
\t #page-content { 
 
\t position: relative; 
 
\t padding-top: 70px; 
 
\t left: 0; 
 
\t } 
 
\t 
 
\t #page-content.slide-active { 
 
\t padding-top: 0 
 
\t } 
 
\t /* put toggle bars on the left :: not using button */ 
 
\t 
 
\t #slide-nav .navbar-toggle { 
 
\t cursor: pointer; 
 
\t position: relative; 
 
\t line-height: 0; 
 
\t float: left; 
 
\t margin: 0; 
 
\t width: 30px; 
 
\t height: 40px; 
 
\t padding: 10px 0 0 0; 
 
\t border: 0; 
 
\t background: transparent; 
 
\t } 
 
\t /* icon bar prettyup - optional */ 
 
\t 
 
\t #slide-nav .navbar-toggle > .icon-bar { 
 
\t width: 100%; 
 
\t display: block; 
 
\t height: 3px; 
 
\t margin: 5px 0 0 0; 
 
\t } 
 
\t 
 
\t #slide-nav .navbar-toggle.slide-active .icon-bar { 
 
\t background: orange 
 
\t } 
 
\t 
 
\t .navbar-header { 
 
\t position: relative 
 
\t } 
 
\t 
 
\t #page-content { 
 
\t width: 1280px; 
 
\t margin: 0 auto; 
 
\t } 
 
\t /* un fix the navbar when active so that all the menu items are accessible */ 
 
\t 
 
\t .navbar.navbar-fixed-top.slide-active { 
 
\t position: relative 
 
\t } 
 
\t 
 
\t @media (max-width:767px) { 
 
\t #slide-nav .container { 
 
\t  margin: 0!important; 
 
\t  padding: 0!important; 
 
\t  height: 100%; 
 
\t } 
 
\t #slide-nav .navbar-header { 
 
\t  margin: 0 auto; 
 
\t  padding: 0 15px; 
 
\t } 
 
\t #slide-nav .navbar.slide-active { 
 
\t  position: absolute; 
 
\t  width: 80%; 
 
\t  top: -1px; 
 
\t  z-index: 1000; 
 
\t } 
 
\t #slide-nav #slidemenu { 
 
\t  background: #f7f7f7; 
 
\t  left: -100%; 
 
\t  width: 80%; 
 
\t  min-width: 0; 
 
\t  position: absolute; 
 
\t  padding-left: 0; 
 
\t  z-index: 2; 
 
\t  top: -8px; 
 
\t  margin: 0; 
 
\t } 
 
\t #slide-nav #slidemenu .navbar-nav { 
 
\t  min-width: 0; 
 
\t  width: 100%; 
 
\t  margin: 0; 
 
\t } 
 
\t #slide-nav #slidemenu .navbar-nav .dropdown-menu li a { 
 
\t  min-width: 0; 
 
\t  width: 80%; 
 
\t  white-space: normal; 
 
\t } 
 
\t #slide-nav { 
 
\t  border-top: 0 
 
\t } 
 
\t #slide-nav.navbar-inverse #slidemenu { 
 
\t  background: #333 
 
\t } 
 
\t /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/ 
 
\t #navbar-height-col { 
 
\t  position: fixed; 
 
\t  top: 0; 
 
\t  height: 100%; 
 
\t  bottom: 0; 
 
\t  width: 80%; 
 
\t  left: -80%; 
 
\t  background: #f7f7f7; 
 
\t } 
 
\t #navbar-height-col.inverse { 
 
\t  background: #333; 
 
\t  z-index: 1; 
 
\t  border: 0; 
 
\t } 
 
\t #slide-nav .navbar-form { 
 
\t  width: 100%; 
 
\t  margin: 8px 0; 
 
\t  text-align: center; 
 
\t  overflow: hidden; 
 
\t  /*fast clearfixer*/ 
 
\t } 
 
\t #slide-nav .navbar-form .form-control { 
 
\t  text-align: center 
 
\t } 
 
\t #slide-nav .navbar-form .btn { 
 
\t  width: 100% 
 
\t } 
 
\t } 
 
\t 
 
\t @media (min-width:768px) { 
 
\t #page-content { 
 
\t  left: 0!important 
 
\t } 
 
\t .navbar.navbar-fixed-top.slide-active { 
 
\t  position: fixed 
 
\t } 
 
\t .navbar-header { 
 
\t  left: 0!important 
 
\t } 
 
\t }

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav"> 
 
    <div class="containerFluid"> 
 
     <div class="navbar-header"> 
 
     <a class="navbar-toggle"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </a> 
 
     </div> 
 
     <div id="slidemenu"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#" data-toggle="collapse" data-target="#sec1">Section 1</a> 
 
      <div class="subMenuDiv"> 
 
       <ul class="nav nav-justified collapse" id="sec1"> 
 
       <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 1 1</span></a></li> 
 
       <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 1 2</span></a></li> 
 
       <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 1 3</span></a></li> 
 
       <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 1 4</span></a></li> 
 
       </ul> 
 
      </div> 
 
      </li> 
 
      <li><a href="#" data-toggle="collapse" data-target="#sec2">Section 2</a> 
 
      <div class="subMenuDiv"> 
 
       <ul class="nav nav-justified collapse" id="sec2"> 
 
       <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 2 1</span></a></li> 
 
       <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 2 2</span></a></li> 
 
       <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 2 3</span></a></li> 
 
       <li><a href="#" class="nav-item" id=""><span class="nav-item-name">Sub-Section 2 3</span></a></li> 
 
       </ul> 
 
      </div> 
 
      </li> 
 
      <li><a href="#" data-toggle="collapse" data-target="#xbprom">Section 3</a> 
 
      <div class="subMenuDiv"> 
 
       <ul class="nav nav-justified collapse" id="xbprom"> 
 
       <li><a href="#" class="xbnav-item" id=""><span class="xbnav-item-name">Sub-Section 3 1</span></a></li> 
 
       <li><a href="#" class="xbnav-item" id=""><span class="xbnav-item-name">Sub-Section 3 2</span></a></li> 
 
       <li><a href="#" class="xbnav-item" id=""><span class="xbnav-item-name">Sub-Section 3 3</span></a></li> 
 
       </ul> 
 
      </div> 
 
      </li> 
 
     </ul>

這裏有一個小提琴https://jsfiddle.net/8j600vmd/4/一些風格元素缺少贅述。

Answer 1

下面是做這件事的方法：從下<li>的出移動subMenuDiv，然後將子菜單中該專區。這樣他們出現在菜單下，而不必使用position：absolute。 Xnay的一些花車和文字對齊中心，中提琴！雖然我沒有在js中加入，但讓其他人關閉。

https://jsfiddle.net/meinkep2/8j600vmd/6/