如何使用 CSS 转换从导航栏下滑出子菜单？

Question

我一直在尝试创建一种过渡效果，在悬停时，子菜单会从主导航栏下方滑出。到目前为止，我已经准备好所有元素并浪费了 HOURS 时间来尝试各种帖子中的不同方法，但无济于事。

我猜我将不得不摆脱 display: none -> display: block 隐藏子菜单的方式，因为它对转换没有好处，但还有各种其他方法，例如转换 max-height、opacity，将其从巨大的 top 值中拉下来等都失败了。使用膨胀的 top 值方法，子菜单会滑过所有内容而不是下方，并且更改 z-index 值会以某种方式将其推到所有内容后面，同时将背景变为透明。非常奇怪的行为。

如果有人能向我解释如何为子菜单创建平滑的滑出过渡，我将不胜感激。

谢谢

Answer 1

工作示例：

https://jsfiddle.net/6umr3733/1/

过程： 我们将下拉列表的 top 的值设置为 -100%。这使它脱离了屏幕。我们给它一个 transition 值，让它在下降时平滑。

.dropdown_content {
  line-height: 1;
  position: absolute;
  top:-100%;
  background-color: #fff;
  z-index:-10;
  width: 120%;
  left: -20%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  transition: all 0.5s ease;
}

当我们将鼠标悬停在 dropdown 上时，您的 div 下降 200%，即回到原来的位置。

.dropdown:hover .dropdown_content {
  top:100%;
}

希望我帮到你了，祝你好运。

Answer 2

您可以简单地使用 transform: scaleY(); 属性将子菜单在隐藏时压缩为 0，在可见时压缩为 1。

勾选JSFiddle

把Display属性去掉，加一个transition，正常时加transform: scaleY(0); transform-origin: 0 0;，悬停到.dropdown_content时加transform: scaleY(1);。

Answer 3

变换比例或过渡 max-height: 0 是导航元素的更好选择。

JSFiddle

如果元素的初始状态是 "display: none"，它将在 DOM 中传递，这将从辅助技术中隐藏该元素（以及任何子元素）。

此外，您可以使用 sibling sectors 到 select .dropdown，而不是过度嵌套元素

相邻的兄弟姐妹：.dropbtn:hover + .dropdown_content

如何使用 CSS 转换从导航栏下滑出子菜单？

How to slide-out a submenu from under the navigation bar using CSS transition?

html

css

css-transitions