火焰灯效果导航菜单

 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>