jquery插件menu效果(一)
jquery插件menu效果(一)
参考页面
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
下载demo和代码
http://www.gmarwaha.com/jquery/lavalamp/zip/lavalamp_0.1.0.zip
得到文件
lavalamp_0.1.0.zip
建立测试页面如下menus-demo1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Lava Lamp Menu Demo</title>
<script src="../components/jquery/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="../components/jquery/jquery.easing.min.js"></script>
<script type="text/javascript"
src="../components/jquery/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#3").lavaLamp( {
fx : "backout",
speed : 700,
click : function(event, menuItem) {
return false;
}
});
});
</script>
<style type="text/css">
.lavaLampBottomStyle {
position:absolute;
height: 29px;
width: 95%;
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;
width: 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>
</head>
<body>
<h3>Bottom Style</h3>
<ul class="lavaLampBottomStyle" id="3">
<li><a href="#">任务管理</a></li>
<li><a href="#">调度管理</a></li>
<li><a href="#">备用菜单</a></li>
<li><a href="#">备用菜单</a></li>
</ul>
</body>
</html>
要让点击link生效，需要将函数里面改为true
click : function(event, menuItem) {
return true;
}
参考页面
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
下载demo和代码
http://www.gmarwaha.com/jquery/lavalamp/zip/lavalamp_0.1.0.zip
得到文件
lavalamp_0.1.0.zip
建立测试页面如下menus-demo1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Lava Lamp Menu Demo</title>
<script src="../components/jquery/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="../components/jquery/jquery.easing.min.js"></script>
<script type="text/javascript"
src="../components/jquery/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#3").lavaLamp( {
fx : "backout",
speed : 700,
click : function(event, menuItem) {
return false;
}
});
});
</script>
<style type="text/css">
.lavaLampBottomStyle {
position:absolute;
height: 29px;
width: 95%;
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;
width: 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>
</head>
<body>
<h3>Bottom Style</h3>
<ul class="lavaLampBottomStyle" id="3">
<li><a href="#">任务管理</a></li>
<li><a href="#">调度管理</a></li>
<li><a href="#">备用菜单</a></li>
<li><a href="#">备用菜单</a></li>
</ul>
</body>
</html>
要让点击link生效，需要将函数里面改为true
click : function(event, menuItem) {
return true;
}