本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码。分享给大家供大家参考,具体如下:
这是一款比较大气清新的滑动导航菜单,CSS和Javascript配合完成,鼠标放到一级菜单上,会滑出二级的菜单,兼容性也不错,适合大多数网站使用,用到两张背景图片,请拷贝图片地址下载图片。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-css-dqqx-scroll-menu-demo/
具体代码如下:
滑动导航菜单 body {margin:25px; font:12px Verdana, Arial, Helvetica} * {padding:0; margin:0} .dropdown {float:left; padding-right:5px} .dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)} .dropdown dt:hover {background:url(images/header_over.gif)} .dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0} .dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none} .dropdown li {display:inline} .dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px} .dropdown a:hover {background:#d9e1e4; color:#000} .dropdown .underline {border-bottom:1px solid #b9d6dc}
- 源码下载
- 最新源码
- 下载排行
- 脚本资源
- Ajax实例
- 网页特效
- 菜单导航
- 层和布局
- 图片特效
希望本文所述对大家Javascript程序设计有所帮助。



