本文实例讲述了jQuery实现的精美平滑二级下拉菜单效果。分享给大家供大家参考,具体如下:
这是一款jQurey实现的向下二级导航菜单效果。效果非常不错,由上到下平滑延伸,给人的感觉协调唯美!js与html代码结构简单明了,便于使用与修改!
运行效果截图如下:
具体代码如下:
jQuery实现精美二级菜单——js特效大全 * { margin:0; padding:0; } body { font:12px/normal Arial, Helvetica, sans-serif; } ul, ol { list-style:none; } a img { border:none; } #content { width:800px; margin:30px auto; } .main_nav { width:100%; height:30px; } .main_nav ul li { float:left; width:190px; height:30px; border-right:1px solid #666; position:relative; } .main_nav ul li a { display:block; height:30px; line-height:30px; text-align:center; background:#333; color:#ccc; text-decoration:none; } .main_nav ul li dl { position:absolute; left:0; top:30px; width:190px; display:none; } .main_nav ul li dl dd { height:31px; } .main_nav ul li dl dd a { display:block; height:30px; line-height:30px; text-align:center; color:white; background:#555; border-bottom:1px solid #666; } .main_nav ul li dl dd a:hover { background:#333; color:#ccc; } .click { margin-top:200px; }
- 网页特效
- 网页特效
- 网页特效
- 网页特效
- 网页特效
- 网页特效
- 网页设计
- 网页设计
- 网页设计
- 网页设计
- 网页设计
- 网页设计
- 网页设计
- 网页设计
- 网页制作
- 网页制作
- 网页制作
- 网页制作
- 网页制作
- 网页制作
- 网站优化
- 网站优化
- 网站优化
- 网站优化
- 网站优化
- 网站优化
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。



