javascript - 导航子菜单从顶部推送

Question

所以，我有一个简单的点击(而不是悬停)“megamenu”，看起来像这样:

一旦用户点击链接，它就会显示在菜单下方，覆盖它下面的任何内容。

但是，除此之外，我需要将此子菜单(蓝色区域)显示在导航栏上方(也就是，一旦打开，将导航栏和内容推到下方)，以便它从顶部显示。

我试过使用绝对定位，使用几个偏移插件......但什么都没有，我完全被卡住了(JS 新手)。

我想知道有人能帮忙吗(我知道我问了很多)...这是一段代码:

<div class="container">
  <div class="main">
    <nav id="cbp-hrmenu" class="cbp-hrmenu">
      <ul>
        <li>
          <a href="#">Parent</a>
          <div class="cbp-hrsub">
            <div class="cbp-hrsub-inner"> 
              <div>
                <h4>Submenu</h4>
                <ul>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                </ul>
              </div>

            </div><!-- /cbp-hrsub-inner -->
          </div><!-- /cbp-hrsub -->
        </li>
        <li>
          <a href="#">Parent 2</a>
          <div class="cbp-hrsub">
            <div class="cbp-hrsub-inner"> 
              <div>
                <h4>Submenu 2</h4>
                <ul>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                </ul>
              </div>

            </div><!-- /cbp-hrsub-inner -->
          </div><!-- /cbp-hrsub -->
        </li>
        <li>
          <a href="#">Parent 3</a>
          <div class="cbp-hrsub">
            <div class="cbp-hrsub-inner"> 
              <div>
                <h4>Submenu 3</h4>
                <ul>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                </ul>
              </div>

            </div><!-- /cbp-hrsub-inner -->
          </div><!-- /cbp-hrsub -->
        </li>
        <li>
          <a href="#">Parent 4</a>
          <div class="cbp-hrsub">
            <div class="cbp-hrsub-inner"> 
              <div>
                <h4>Submenu 4</h4>
                <ul>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
                </ul>
              </div>

            </div><!-- /cbp-hrsub-inner -->
          </div><!-- /cbp-hrsub -->
        </li>

      </ul>
    </nav>
  </div>
</div>
<div style="display:block; height:500px">Lorem Ipsum</div>

fiddle 位于 https://jsfiddle.net/dca1eLqq/P.S 对不起，我的英语可能不好

P.P.S 由于我的英语不好，我没有正确解释它，所以这里是一个关于它应该是什么样子的快速模型 http://i.imgur.com/enDhe5S.png

Answer 1

“我需要这个子菜单(蓝色区域)显示在导航栏上方(又名，一旦打开就将导航栏和内容推到下面)，所以它从顶部出现。” 不是很清楚。

Do you also want the selected menu item to be below the submenu like the rest of the menu

或

only the selected menu item to be above the submenu while the rest of the menu is below the submenu.

据我了解，您要查找的是 OR 语句的第二部分。

为此，您只需进行几处更改。首先，您需要删除绝对定位。即 .cbp-hrmenu .cbp-hrsub需要更改为:

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
    display: none;
    position: relative;       /*change*/
    background: #47a3da;
    width: 100%;
    left: 0;
}

其次，您需要添加类 .cbp-hrmenu > ul > li.cbp-hropen

.cbp-hrmenu > ul > li.cbp-hropen {
    display: block;
}

请看下面的片段。我想这就是您要找的。

/**
 * cbpHorizontalMenu.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpHorizontalMenu = (function() {

	var $listItems = $( '#cbp-hrmenu > ul > li' ),
		$menuItems = $listItems.children( 'a' ),
		$body = $( 'body' ),
		current = -1;

	function init() {
		$menuItems.on( 'click', open );
		$listItems.on( 'click', function( event ) { event.stopPropagation(); } );
	}

	function open( event ) {

		if( current !== -1 ) {
			$listItems.eq( current ).removeClass( 'cbp-hropen' );
		}

		var $item = $( event.currentTarget ).parent( 'li' ),
			idx = $item.index();

		if( current === idx ) {
			$item.removeClass( 'cbp-hropen' );
			current = -1;
		}
		else {
			$item.addClass( 'cbp-hropen' );
			current = idx;
			$body.off( 'click' ).on( 'click', close );
		}

		return false;

	}

	function close( event ) {
		$listItems.eq( current ).removeClass( 'cbp-hropen' );
		current = -1;
	}

	return { init : init };

})();
$(function() {
    cbpHorizontalMenu.init();
});

.container > header {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
	padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
	font-size: 2.125em;
	line-height: 1.3;
	margin: 0 0 0.6em 0;
	float: left;
	font-weight: 400;
}

.container > header > span {
	display: block;
	position: relative;
	z-index: 9999;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	padding: 0 0 0.6em 0.1em;
}

.container > header > span span:after {
	width: 30px;
	height: 30px;
	left: -12px;
	font-size: 50%;
	top: -8px;
	font-size: 75%;
	position: relative;
}

.container > header > span span:hover:before {
	content: attr(data-content);
	text-transform: none;
	text-indent: 0;
	letter-spacing: 0;
	font-weight: 300;
	font-size: 110%;
	padding: 0.8em 1em;
	line-height: 1.2;
	text-align: left;
	left: auto;
	margin-left: 4px;
	position: absolute;
	color: #fff;
	background: #47a3da;
}

.container > header nav {
	float: right;
	text-align: center;
}

.container > header nav a {
	display: inline-block;
	position: relative;
	text-align: left;
	width: 2.5em;
	height: 2.5em;
	background: #fff;
	border-radius: 50%;
	margin: 0 0.1em;
	border: 4px solid #47a3da;
}

.container > header nav a > span {
	display: none;
}

.container > header nav a:hover:before {
	content: attr(data-info);
	color: #47a3da;
	position: absolute;
	width: 600%;
	top: 120%;
	text-align: right;
	right: 0;
	pointer-events: none;
}

.container > header nav a:hover {
	background: #47a3da;
}
.cbp-hrmenu {
	width: 100%;
	margin-top: 2em;
	border-bottom: 1px solid #47a3da;
	border-top: 1px solid #47a3da;
}

/* general ul style */
.cbp-hrmenu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
	width: 90%;
	max-width: 70em;
	margin: 0 auto;
	padding: 0 1.875em;
}

.cbp-hrmenu > ul > li {
	display: inline-block;
}

.cbp-hrmenu > ul > li > a {
	font-weight: 700;
	padding: 1em 2em;
	color: #999;
	display: inline-block;
}

.cbp-hrmenu > ul > li.cbp-hropen {
    display: block;
}

.cbp-hrmenu > ul > li > a:hover {
	color: #47a3da;
}

.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
	color: #fff;
	background: #47a3da;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
	display: none;
	position: relative;
	background: #47a3da;
	width: 100%;
	left: 0;
}

.cbp-hropen .cbp-hrsub {
	display: block;
	padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
	width: 33%;
	float: left;
	padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
	content: " ";
	display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
	clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
	line-height: 2em;
}

.cbp-hrsub h4 {
	color: #afdefa;
	padding: 2em 0 0.6em;
	margin: 0;
	font-size: 160%;
	font-weight: 300;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
      <div class="main">
        <nav id="cbp-hrmenu" class="cbp-hrmenu">
          <ul>
            <li>
              <a href="#">Parent</a>
              <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner"> 
                  <div>
                    <h4>Submenu</h4>
                    <ul>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                    </ul>
                  </div>

                </div><!-- /cbp-hrsub-inner -->
              </div><!-- /cbp-hrsub -->
            </li>
            <li>
              <a href="#">Parent 2</a>
              <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner"> 
                  <div>
                    <h4>Submenu 2</h4>
                    <ul>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                    </ul>
                  </div>
                  
                </div><!-- /cbp-hrsub-inner -->
              </div><!-- /cbp-hrsub -->
            </li>
            <li>
              <a href="#">Parent 3</a>
              <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner"> 
                  <div>
                    <h4>Submenu 3</h4>
                    <ul>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                    </ul>
                  </div>
                  
                </div><!-- /cbp-hrsub-inner -->
              </div><!-- /cbp-hrsub -->
            </li>
            <li>
              <a href="#">Parent 4</a>
              <div class="cbp-hrsub">
                <div class="cbp-hrsub-inner"> 
                  <div>
                    <h4>Submenu 4</h4>
                    <ul>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                      <li><a href="#">Link</a></li>
                    </ul>
                  </div>
                  
                </div><!-- /cbp-hrsub-inner -->
              </div><!-- /cbp-hrsub -->
            </li>
            
          </ul>
        </nav>
      </div>
    </div>
    <div style="display:block; height:500px">Lorem Ipsum</div>