JS实现光滑展开合拢的菜单效果代码

本文实例讲述了JS实现光滑展开合拢的菜单效果代码。分享给大家供大家参考。具体如下：

这是一个光滑展开又合拢的JS菜单效果，无jQuery插件，完全Javascript代码实现，没有过多修饰，有兴趣的美化一下，肯定是款不错的折叠菜单。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-swift-fade-in-out-menu-style-codes/

具体代码如下：

*{margin:0;padding:0;}
ul,li{list-style:none;}
#con{width:164px; margin:50px auto 0;}
#con h4.top{ height:4px; width:164px; overflow:hidden;}
#con h4.bottom{height:4px; width:164px;overflow:hidden;}
#con div{height:0px; overflow:hidden;}
#con h3{border-top:2px solid #fff; border-bottom:1px solid #D6EFFF;}


 


 

 
 设计素材
 
  

   
精品图标
   
图片幻灯
   
网页播放器
  
 
 模板素材
 
  

   
企业网站
   
儿童网站
   
音乐网站
   
Discuz模板
  
 
 脚本下载
 
  

   
jQuery
   
Ajax
   
PHP
  
 
 网页特效
 
  

   
菜单
   
表单
   
浏览器
  
 
 

 

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