上传者: 38739919
|
上传时间: 2022-03-04 14:22:58
|
文件大小: 49KB
|
文件类型: -
以前做这种操作就是简单的display:block,但现在用户的要求也越来越高,需要美观和动画感。
现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单。
看下效果图:
点开效果:
其实原理比较简单,就是通过子菜单的 max-height: 0;和 max-height: 2000px来实现子菜单的显示和关闭。加上css3的 transition: max-height .3s;来实现动画效果。
子菜单的样式:
.tree-son-menu{
background-color: #FFF;
.menu-body {
z-index: 20;
position: r