导航栏下方的下拉导航菜单

Question

有问题。当我在移动视图中调用导航菜单时，当我希望它从导航栏下方下拉时，它会从页面顶部下拉。 以前我已经将z-index用于两个相邻块：header和navigation。但是现在在这个项目中，两个块的背景都是透明的，所以z-index并没有像我的意思那样显示工作。那么也许还有其他一些黑客来帮助解决这个问题？ 问题Here's the codepen

Answer 1

我找到了解决方案。我们最好使用高度转换，然后使用保证金。 我们为navigation class

添加了这个道具

max-height: 0;
transition: max-height 0.15s ease-out;
overflow: hidden;

以及navigation active的以下道具：

max-height: 500px;
transition: max-height 0.5s ease-in;

最大高度为500px是可选的，我只使用我的块永远不会达到的值。 您有the codepen来显示详细信息