blog » 笔记 » jQuery滑动背影导航插件
jQuery滑动背影导航插件
今天小琦问我一个滑动背影导航的效果, 看了一下貌似是用mootools实现的.
想起以前在蓝色理想上有看到过用jQuery实现的例子,就找来了.还是喜欢jQ啊 =,,=
首先下载Lavalamp, 需要的JS文件以及演示都在里边.
在<head>插入:
html部分:
lavalamp会自动加上一段html来表现当前菜单高亮部分:
css部分:
/* Styles for the entire LavaLamp menu */
.lavaLamp {
position: relative;
height: 29px; width: 421px;
background: url("../image/bg.gif") no-repeat top;
padding: 15px; margin: 10px 0;
overflow: hidden;
}
/* Force the list to flow horizontally */
.lavaLamp li {
float: left;
list-style: none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back {
background: url("../image/lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {
background: url("../image/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Styles for each menu-item. */
.lavaLamp li a {
position: relative; overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff; outline: none;
text-align: center;
height: 30px; top: 7px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}
RSS 2.0 | leave a response | trackback
谢谢啊
找了好久，终于找着了！！！