带有子导航栏的响应式导航栏

Question

美好的一天，

请原谅我，因为我的导航词汇不是最好的。如果这个问题令人困惑，我很抱歉。

我正在开发一个导航栏，该导航栏需要在 768 像素及以上的页面上居中。导航中的项目打开（或可能切换）直接位于下方的子导航。这些导航也应该出现在页面的中心。

我已经能够处理导航栏的响应部分，让主要项目垂直对齐，每个项目的子导航菜单在下面展开，我给了它们一个缩进以进行一些分离。这运作良好。

但是，我的问题不是响应方面，而是宽度大于 768 像素的行为。发生的情况是切换菜单的子导航会将其他主要项目推到子导航下方的页面下方。

这是我的代码：

$(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');
        }


    });

});

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

<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>

这是一个 Fiddle https://jsfiddle.net/8j600vmd/4/ 为简洁起见，缺少一些样式元素。

Answer 1

这是一种方法：将 subMenuDiv 从<li> 的下方移出，然后将子菜单放入该 div 中。这样它们就会出现在菜单下，而无需使用 position:absolute。 Xnay 一些浮动和文本对齐到中心，和中提琴！我没有添加js来让其他人关闭。

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