jquery插件menu效果(一)

最新推荐文章于 2022-11-23 13:40:05 发布

magic_dreamer

最新推荐文章于 2022-11-23 13:40:05 发布

阅读量60

点赞数

分类专栏： UI 文章标签： jQuery HTML Blog ViewUI

本文链接：https://blog.csdn.net/magic_dreamer/article/details/83531415

版权

UI 专栏收录该内容

122 篇文章 0 订阅

订阅专栏

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;
}