实现效果图:
原理:
- 使用2个相同的导航条,一个(nav1)放置在底部做为默认样式,一个(nav2)做为鼠标悬浮上去的样式。
- 将nav1和nav2全部绝对定位于同一个父容器。
- nav2的宽度只设置为一个菜单的大小,让溢出的部分隐藏,这样就透出底部的默认样式,达到没被训中的效果。
- 通过js来控制滑块(bg)在nav2上滑动,滑动到的地方就显示出悬浮效果。
demo代码:
<div>
<div class="box1">
<div class="bg">
<ul class="demoNav1" style="left:-10px">
<li class="on">全部案例</li>
<li>网站设计</li>
<li>APP开发</li>
<li>微信平台</li>
<li>软件开发</li>
</ul>
</div>
</div>
<div class="box">
<ul class="demoNav">
<li class="on">全部案例</li>
<li>网站设计</li>
<li>APP开发</li>
<li>微信平台</li>
<li>软件开发</li>
</ul>
</div>
</div>
javascript脚本:
<script type="text/javascript">
//导航栏活动效果
$(document).ready(function () {
var menuLi = $(".demoNav li");
var bg = $(".bg");
menuLi.hover(
function () {
for (var i = 0, len = menuLi.length; i < len; i++) {
if ($(this).index() == i) {
$(".demoNav1").css("left", -menuLi.outerWidth(true) * i-10);
bg.animate({ left: menuLi.outerWidth(true) * i }, { queue: false, duration: 100 });
}
}
}
);
});
</script>
css样式:
/*案例页面导航条*/
.demoNav, .demoNav1 {
list-style: none;
margin: 0;
padding: 0;
font-size: 14pt;
}
.box, .box1 {
height: 50px;
position: absolute;
}
.box {
width: 707px;
z-index: 0;
}
.box1 {
width: 0px;
z-index: 1;
}
.box ul, .box1 ul {
width: 707px;
position: absolute;
z-index: 2;
left: 0;
top: 0;
}
.box li, .box1 li {
width: 100px;
height: 50px;
float: left;
line-height: 50px;
cursor: pointer;
text-align: center;
border-radius: 5px;
}
.box li {
margin: 0 10px;
background: #F5F5F5;
}
.box1 li {
margin: 0 10px;
background: #4D4D4D;
color: white;
}
.box li:last-child, .box1 li:last-child {
border: none;
}
.bg {
width: 100px;
height: 50px;
position: absolute;
z-index: 1;
margin-left: 10px;
overflow: hidden;
}