代码简介：Jquery仿Flash效果的3款滑动菜单
代码内容：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Jquery仿Flash效果的3款滑动菜单_网页代码站(www.webdm.cn)</title>
<style type="text/css">
.lavaLampWithImage {
position: relative;
height: 29px;
421px;
background: url("http://www.webdm.cn/images/20100916/bg.gif") no-repeat top;
padding: 15px;
margin: 10px 0;
overflow: hidden;
}
.lavaLampWithImage li {
float: left;
list-style: none;
}
.lavaLampWithImage li.back {
background: url("http://www.webdm.cn/images/20100916/lava.gif") no-repeat right -30px;
9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampWithImage li.back .left {
background: url("http://www.webdm.cn/images/20100916/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a {
font: bold 14px arial;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
border: none;
}
.lavaLampNoImage {
position: relative;
height: 29px;
421px;
background-color: white;
padding: 15px;
margin: 10px 0;
overflow: hidden;
border: 1px solid gray;
}
.lavaLampNoImage li {
float: left;
list-style: none;
}
.lavaLampNoImage li.back {
border: 1px solid #000;
background-color: #e6e8ea;
9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampNoImage li a {
font: bold 14px arial;
text-decoration: none;
color: #000;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
border: none;
}
.lavaLampBottomStyle {
position: relative;
height: 29px;
421px;
background-color: white;
padding: 15px;
margin: 10px 0;
overflow: hidden;
border: 1px solid gray;
}
.lavaLampBottomStyle li {
float: left;
list-style: none;
}
.lavaLampBottomStyle li.back {
border-bottom: 5px solid blue;
9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampBottomStyle li a {
font: bold 14px arial;
text-decoration: none;
color: #000;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;
}
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
border: none;
}
</style>
<script type="text/javascript" src="http://www.webdm.cn/images/20100916/jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="http://www.webdm.cn/images/20100916/jquery.easing.min.js"></script>
<script type="text/javascript" src="http://www.webdm.cn/images/20100916/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>
</head>
<body>
<h3>With Image</h3>
<ul class="lavaLampWithImage" id="1">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">elephant</a></li>
</ul>
<br><br><br>
<h3>No Image</h3>
<ul class="lavaLampNoImage" id="2">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">elephant</a></li>
</ul>
<br><br><br>
<h3>Bottom Style</h3>
<ul class="lavaLampBottomStyle" id="3">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">elephant</a></li>
</ul>
<p><p>在谈到为网站创建导航栏时，你可能想到的第一件事就是使用<ul></ul>列表来定义一个标签风格的菜单。可是现在这种标签风格的导航栏到处都是，这样也只是在语义上做得更好，提高了导航栏的可用
性，而今天刚是要介绍两款具有Web 2.0 风格的仿Flash 滑动效果的导航栏：Fancy Menu 和LavaLamp 。</p>
<p>这两款导航栏表现效果一样，不同的是Fancy Menu 使用的是<a href="http://www.mootools.net/" target="_blank">MooTools</a> 的Javascript 框架，而LavaLamp 则使用了<a href="http://jquery.com/"
target="_blank">jQuery</a> 的Javascript 框架。</p>
<p>来源：<a href="http://devthought.com/cssjavascript-true-power-fancy-menu/" target="_blank">http://devthought.com/cssjavascript-true-power-fancy-menu/</a> <a
href="http://gmarwaha.com/blog/?p=7" target="_blank">http://gmarwaha.com/blog/?p=7</a></p></p>
<p></p>
</body></html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/d03392f2-eb99-4fae-ab60-39e24516e9a5.html