www.cftea.com

超方便的 CSS 菜单折叠

千一网络(原创)2018/3/27 9:39:34

超方便的 CSS 菜单折叠

如上,假设一级菜单是 div,二级菜单是 ul。形如:

当菜单展开时,左边有一个蓝色的标记,右边是折叠标记。

左边蓝色标记自不用表,CSS 设置 border 即可,右边利用 CSS 也超方便。

然后再说子菜单的折叠效果,有动画噢:

注意 ul 一定要有 height 的具体值,如果没有具体指明多少 px,则虽然能折叠,但是没有动画效果。

最后就是利用 jQuery 或 ezj 切换 className 了,当点击 div 的时候 toggleClass("collapsed")。

相关阅读

<<返回首页<<