使用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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery 导航效果- 中国asp之家</title> <style type="text/css"> *{margin:0; padding:0; line-height:24px;} li{list-style:none; float:left;} div{margin:10px auto; width:800px; border:1px solid #dcdcdc;} ul{} ul li{position:relative;} ul li a{padding:0 10px; text-decoration:none; display:block;} ul li a:hover{background:#FFFFCC;} ul li table{top:10px; position:absolute; display:none; border:1px solid #999; background:#FFF;} </style> </head> <body> <div> <ul class="nav"> <li><a href="#">nav1</a> <table> <tr> <td><a href="#">subnav11</a></td> <td><a href="#">subnav12</a></td> <td><a href="#">subnav13</a></td> <td><a href="#">subnav14</a></td> </tr> </table> </li> <li><a href="#">nav2</a> <table> <tr> <td><a href="#">subnav21</a></td> <td><a href="#">subnav22</a></td> <td><a href="#">subnav23</a></td> <td><a href="#">subnav24</a></td> </tr> </table> </li> <li><a href="#">nav3</a> <table> <tr> <td><a href="#">subnav31</a></td> <td><a href="#">subnav32</a></td> <td><a href="#">subnav33</a></td> <td><a href="#">subnav34</a></td> </tr> </table> </li> </ul> </div> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.nav > li').hoverIntent( function(){ show(this); }, function(){ hide(this); return false; } ); }); var over =false; function show(obj){ $(obj).find('table').animate({ top: 23, opacity: 'show' }, 500); } function hide(obj){ $(obj).find('table').animate({ top: 10, opacity: 'hide' }, 500); } </script> </body> </html> [提示：你可先修改部分代码，再按运行]
请稍等，评论加载中...