如何将边距顶部添加到响应式多级菜单，而不影响导航动画

Question

>演示

http://tympanus.net/Development/ResponsiveMultiLevelMenu/index2.html

单击汉堡菜单图标后，将显示菜单。

这是菜单的原始 CSS：

.dl-menuwrapper .dl-menu {
  backface-visibility: hidden;
  margin: 5px 0 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(10px);
  width: 100%;
}

期望的行为

我想将菜单从margin-top: 5px移动到margin-top: 34px，即：

margin: 34px 0 5px 0px;

实际行为

但是，当我在Firebug中更改此属性时，在导航到子菜单时发生的动画过程中，菜单会向上凸起到其原始位置，然后在动画完成后向下凸起。

我希望菜单在动画过程中保持其垂直位置。

我一直在观察Firebug中的CSS更改，但我仍然无法弄清楚如何启用它。

菜单似乎从以下位置动画化：

子菜单关闭状态

<ul class="dl-menu dl-menuopen">

子菜单打开状态

<ul class="dl-menu dl-menuopen dl-subview">

在这 2 个状态之间应用了另一个类：

<ul class="dl-menu dl-menuopen dl-animate-in-2">

或：

<ul class="dl-menu dl-menuopen dl-animate-out-2">

我尝试过什么

所有这些状态下的公共类都是dl-menuopen，所以我尝试了：

.dl-menuopen {
  margin-top: 34px !important;
}

但在动画中仍然得到了"凸起"的效果。

然后我尝试添加：

.dl-animate-in-2, .dl-animate-out-2 {
  margin-top: 34px !important;
}

但是菜单仍然被推高了一点。

我也试过：

.dl-animate-in-2, .dl-animate-out-2, .dl-menu {
  margin-top: 34px !important;
}

但动画仍然紧张不安。

如何在整个动画中保持margin-top:34px？

Answer 1

这

似乎有效：

是：

.dl-menuwrapper .dl-menu {
  backface-visibility: hidden;
  margin: 5px 0 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(10px);
  width: 100%;
}

更改为：

.dl-menuwrapper .dl-menu {
  backface-visibility: hidden;
  margin: 0px !important; /* change here */
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(10px);
  width: 100%;
}

是：

.dl-menuwrapper > .dl-submenu {
  left: 0;
  margin: 0;
  position: absolute;
  top: 50px;
  width: 100%;
}

更改为：

.dl-menuwrapper > .dl-submenu {
  left: 0;
  margin: 0;
  position: absolute;
  /*top: 50px;*/ /* change here */
  width: 100%;
}

并为.dl-menuwrapper button添加了margin-bottom: 34px.