Javascript 导航子菜单从顶部推动

因此，我有一个简单的点击（而不是悬停）“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>

子菜单









子菜单2









子菜单3









子菜单4









乱数假文

小提琴正在演奏 对不起，我的英语可能不好

p.p.S由于我的英语不好，我没有正确地解释它，所以这里有一个关于它应该是什么样子的快速模型

“我需要将此子菜单（蓝色区域）显示在导航栏上方（又名，打开导航栏后按下导航栏和下面的内容），以便它从顶部显示。”不太清楚

是否还希望所选菜单项位于子菜单下方，如 菜单的其余部分

或

只有选定的菜单项位于子菜单上方，而其余的 该菜单位于子菜单下方

根据我的理解，这是你要寻找的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;
}

请参阅下面的代码片段。我想这就是你要找的

/**
*cbphorizontalmenus.js v1.0.0
* http://www.codrops.com
*
*根据麻省理工学院许可证授权。
* http://www.opensource.org/licenses/mit-license.php
* 
*版权所有2013，Codrops
* http://www.codrops.com
*/
var cbpHorizontalMenu=（函数（）{
变量$listItems=$（“#cbp hrmenu>ul>li”），
$menuItems=$listItems.children（'a'），
$body=$（“body”），
电流=-1；
函数init（）{
$menuItems.on（'单击'，打开）；
$listItems.on（'click'，函数（事件）{event.stopPropagation（）；}）；
}
功能打开（事件）{
如果（当前！=-1）{
$listItems.eq（当前）.removeClass（'cbp hropen'）；
}
var$item=$（event.currentTarget）.parent（'li'），
idx=$item.index（）；
如果（当前===idx）{
$item.removeClass（'cbp hropen'）；
电流=-1；
}
否则{
$item.addClass（'cbp hropen'）；
电流=idx；
$body.off（'click'）。on（'click'，close）；
}
返回false；
}
功能关闭（事件）{
$listItems.eq（当前）.removeClass（'cbp hropen'）；
电流=-1；
}
返回{init:init}；
})();
$（函数（）{
cbpHorizontalMenu.init（）；
});
.container>标题{
宽度：90%；
最大宽度：69em；
保证金：0自动；
填充：0 1.875em 3.125em 1.875em；
}
.容器>标题{
填充物：2.875em 1.875em 1.875em；
}
.容器>标题h1{
字号：2.125em；
线高：1.3；
保证金：0.6em0；
浮动：左；
字体大小：400；
}
.container>header>span{
显示：块；
位置：相对位置；
z指数：9999；
字号：700；
文本转换：大写；
字母间距：0.5em；
填充：0.6em 0.1em；
}
.container>header>span:after{
宽度：30px；
高度：30px；
左-12px；
字体大小：50%；
顶部：-8px；
字体大小：75%；
位置：相对位置；
}
.container>header>span:hover:before{
内容：attr（数据内容）；
文本转换：无；
文本缩进：0；
字母间距：0；
字体大小：300；
字体大小：110%；
填充：0.8em 1em；
线高：1.2；
文本对齐：左对齐；
左：自动；
左边距：4倍；
位置：绝对位置；
颜色：#fff；
背景：#47a3da；
}
.容器>标题导航{
浮动：对；
文本对齐：居中；
}
.容器>标题导航a{
显示：内联块；
位置：相对位置；
文本对齐：左对齐；
宽度：2.5em；
高度：2.5em；
背景：#fff；
边界半径：50%；
边缘：0.1米；
边框：4px实心#47a3da；
}
.容器>收割台导航a>跨度{
显示：无；
}
.container>标题导航a:悬停：之前{
内容：attr（数据信息）；
颜色：#47a3da；
位置：绝对位置；
宽度：600%；
最高：120%；
文本对齐：右对齐；
右：0；
指针事件：无；
}
.容器>标题导航a：悬停{
背景：#47a3da；
}
.cbp hrmenu{
宽度：100%；
边缘顶部：2米；
边框底部：1px实心#47a3da；
边框顶部：1px实心#47a3da；
}
/*通用ul样式*/
.cbp HRUL菜单{
保证金：0；
填充：0；
列表样式类型：无；
}
/*一级ul风格*/
.cbp hrmenu>ul，
.cbp hrmenu.cbp hrsub内部{
.cbp-hrmenu .cbp-hrsub{
    ...
    position:absolute;
    ...
}

function open( event ) {
    if( current !== -1 ) {
        $listItems.eq( current ).removeClass( 'cbp-hropen' ).css("margin-bottom",0);
    }
    var $item = $( event.currentTarget ).parent( 'li' ),
    idx = $item.index();
    if( current === idx ) {
        $item.removeClass( 'cbp-hropen' );
        $item.css("margin-bottom",0);
        current = -1;            
    }
    else {
        $item.addClass( 'cbp-hropen' );
        $item.css("margin-bottom",$item.find(".cbp-hrsub").get(0).getBoundingClientRect().height+3);
        current = idx;
        $body.off( 'click' ).on( 'click', close );
    }
    return false;
}