使菜单具有slideToggle效果并向下推送元素

Question

我正在使用 CODROPS 中的一个不错的Mega菜单，我正在尝试自定义它：

1）slideToggle效果

2）当菜单打开时，将下面的div元素向下推（IE：不与下面的元素重叠）

Here is my JS FIDDLE

这是我到目前为止所做的：

1）我知道非常基本的 jquery，通常我知道如何应用 slideToggle 效果，但我似乎无法使用他们的javascript代码，所以我还在猜测放在哪里却没有成功。我尝试过在线研究，但找不到解决方案。

2）为了使菜单下方的元素被按下，我知道在下面的css中使位置相对，但这只会在菜单激活后中断菜单。

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

将下面的元素推下来会很好，但是对我来说，slideToggle效果更重要......

Answer 1

你必须重构一下才能让它以你想要的方式工作。

包含子文本的.cbp-hrsub元素绝对定位，覆盖下面的任何文本。您需要删除position:absolute才能恢复为浏览器默认position:static。

但是，由于.cbp-hrsub元素是每个菜单<li>的一部分，因此会将其他<li>元素向下推。

我建议将HTML拆分出来，以便您的菜单<li>元素与子文本元素分开。在新<ul>中包含子文本元素，并在单击相关菜单项链接时向下滑动。