[英]Animate vertical sub menu with css
We have menu and some of this menu has a sub-menu. 我们有菜单,其中一些菜单有子菜单。 i want to display sub-menu when come to display block with animation.
我想在显示带有动画的块时显示子菜单。 specially height of sub-menu.
特别是子菜单的高度。 for example:
例如:
#menu ul.sub_menu {
display : none;
}
#menu li:hover ul.sub_menu {
display : block;
}
please see my code jsfiddle.net/oa6ftrL8/ , thanks 请看我的代码jsfiddle.net/oa6ftrL8/ ,谢谢
You cannot animate the display
property. 您不能为
display
属性设置动画。 Go with opacity: 0;
opacity: 0;
instead of display: none;
而不是
display: none;
and opacity: 1;
和
opacity: 1;
instead of display: block;
而不是
display: block;
Add some max-height: 0;
添加一些
max-height: 0;
and max-height: fartoomanypx;
和
max-height: fartoomanypx;
for the animation (because height
cannot be animated to auto
). 动画(因为无法将
height
动画为auto
)。
https://jsfiddle.net/oa6ftrL8/1/ https://jsfiddle.net/oa6ftrL8/1/
You will have to start fiddling yourself to make it beautiful. 您将必须开始摆弄自己,以使其美丽。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.