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

Question

有问题。当我在移动 View 中调用导航菜单时，当我希望它从导航栏下方下拉时，它会从页面顶部下拉。以前我为两个相邻 block 使用了 z-index:header 和 navigation。但是现在在这个元素中，两个 block 的背景都是透明的，所以 z-index 并没有像我想的那样工作。那么也许还有其他一些技巧可以帮助解决这个问题？ Here's the codepen对于这个问题

Answer 1

我找到了解决方案。对于这种情况，我们最好使用高度过渡，然后使用边距。我们为 navigation 类添加这个 Prop

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

和以下 navigation active Prop :

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

max-height 的 500px 是可选的，我只是使用了我的 block 永远不会达到的值。你有 the codepen显示细节