JS实现适合于后台使用的动画折叠菜单效果

本文实例讲述了JS实现适合于后台使用的动画折叠菜单效果。分享给大家供大家参考。具体如下：

这是一款适合于后台使用的动画折叠菜单，代码超简，无jQuery，展开与折叠效果平滑。本演示中有两组菜单，向大家展示如何在一个网页中布局两个菜单，整体效果以及兼容性还算可以，希望在实际应用中不会出现什么问题。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-ht-control-animate-zd-menu-codes/

具体代码如下：

*{margin:0;padding:0;}
.foldmenu{border:1px solid #000;width:150px;margin:50px;}
.foldmenu ul{list-style-type:none;height:25px;line-height:25px;overflow:hidden;cursor:pointer;}
.foldmenu ul.open{height:auto;}
.foldmenu ul span{display:block;padding-left:5px}
.foldmenu ul li{border-bottom:1px solid #DDDDDD;}
.foldmenu li a{background-color:#EEEEEE;color:#006666;display:block;padding:5px 10px;text-decoration:none;text-align:center;}
.foldmenu li a:hover{background-color:#006666;color:#ffffff;}
.foldmenu li a.current{background-color:#006666;color:#ffffff;}




 

  编程天地
 
电子书籍
 
源码乐园
 
 

  中国门户
 
百度搜索
 
新浪新闻
  
腾讯QQ
 
 

  音乐网站
 
百度音乐
 
QQ163
 


 

  世界大学
 
剑桥
 
牛津
  
哈佛
 
麻省理工
 
 

  中国大学
 
北大
 
清华
  
港大
 
 

  世界好车
 
宝马
 
奔驰
 
奥迪
 
 

  开源论坛
 
PhpWind
 
Discuz!
 

希望本文所述对大家的Javascript程序设计有所帮助。