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

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 一些 float 和文本对齐到中心，中提琴!不过，我没有添加 js 来使其他关闭。

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