平滑效果的下拉菜单代码，基于jQuery插件

发布时间：2018-08-25 22:32:25 所属栏目：政策来源：站长网

导读：一款具有平滑效果的下拉菜单代码，时间关系没有进行太多美化，只是实现了一个雏形，代码中引入了 jQuery 插件，原来普通的下拉菜单，加入jQuery后有了动感的效果，非常不错，如果你的网站还没有引入jQuery框架的话，那么你OUT了！为解决一些网页特效运行

　　一款具有平滑效果的下拉菜单代码，时间关系没有进行太多美化，只是实现了一个雏形，代码中引入了jQuery插件，原来普通的下拉菜单，加入jQuery后有了动感的效果，非常不错，如果你的网站还没有引入jQuery框架的话，那么你OUT了！

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> <head> <title>下滑菜单</title> <script src="/uploads/common/js/jquery-1.3.2.js"></script> <script> $(document).ready(function(){ $("li.item > ol").hide(); $("li.item").hover(function(){ $("ol",this).slideDown("fast");//$("ol",this): 寻找this中的ol. },function(){ $("ol",this).slideUp("fast"); }); }); </script> <style> body { font-family: Arial; font-size: 16px; } ol { list-style: none; margin: 0; padding: 0; } li.item { float: left; width: 150px; background: #F39; margin: 5px; } li.item a { font-size: 18px; color: #FFF; margin: 4px; } li.item ol { background: #FFF; margin: 3px; } li.item ol a { font-size: 16px; color: #000; margin: 0; } </style> </head> <body> <ol class="menu"> <li class="item"><a href="/">烈火学院</a> <ol> <li><a href="#">1111</a></li> <li><a href="#">2222</a></li> <li><a href="#">3333</a></li> </ol></li> <li class="item"><a href="/">源码下载</a> <ol> <li><a href="#">444444</a></li> <li><a href="#">555555</a></li> <li><a href="#">66666</a></li> <li><a href="#">777777</a></li> </ol></li> <li class="item"><a href="http://www.veryhuo.com/Res/Effects/">网页特效</a> <ol> <li><a href="#">88888</a></li> <li><a href="#">999999</a></li> <li><a href="#">1</a></li>1111 </ol></li> </ol> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!