1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>火焰灯效果导航菜单</title> 6 <script src="js/jquery-1.6.1.min.js"></script> 7 <script src="js/jquery.easing.min.js"></script> 8 <script src="js/jquery.lavalamp.min.js"></script> 9 <style> 10 *{ padding:0; margin:0;} 11 body{ font-size:12px; font-family:"宋体", Arial; color:#333; background:#fff;} 12 ul ,ol ,li{ list-style: none;} 13 a{ color:#333; text-decoration:none;} 14 #menu{ width: 600px; margin:20px auto; border:1px solid #ccc; height:36px; line-height:36px; position:relative;} 15 #menu ul{ padding-left:60px;} 16 #menu li{ float:left; font-size:14px; font-weight: bold; margin-right:20px; display:inline;} 17 #menu li a{ display:block; padding:0 10px; position:relative; z-index:3;} 18 #menu li a:hover{ color:#ff7900;} 19 #menu li.back{height:30px; border-bottom:3px solid #ff7900; position:absolute; z-index:2;} 20 </style> 21 </head> 22 23 <body> 24 <div id="menu"> 25 <ul> 26 <li class="current"><a href="#">首页</a></li> 27 <li><a href="#">新闻中心</a></li> 28 <li><a href="#">产品中心</a></li> 29 <li><a href="#">留言反馈</a></li> 30 <li><a href="#">关于我们</a></li> 31 </ul> 32 </div> 33 <script> 34 $(function(){ 35 $("#menu").lavaLamp({ 36 fx: "backout", //缓动类型 37 speed: 700, //缓动时间 38 click: function(event, menuItem) { 39 return false; //单击触发事件 40 } 41 }); 42 }); 43 </script> 44 </body> 45 </html>