要实现这种导航条,首先要知道箭头是怎么做出来。
http://www.cnblogs.com/daxiong/articles/3158630.html
这里说了用css做箭头的原理和实现。
知道怎么做箭头后,实现起来就很简单了。
我用css伪类:before和 :after实现箭头,
.left:before,.right:before {
position: absolute;
content: "";
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent
transparent transparent #1E97EC;
left: 1px;
}
.left:after,.right:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent
transparent transparent #FFF;
left:
-1px;
}
这样就有前后箭头了,接着只要微调一下就可以了。
第一个和最后一个,只要把对应的div去掉
(.left或者.right),再加个border-left,或者border-right就可以了
以下是代码
css :
.nav-item {
border-top: 1px solid #1E97EC;
border-bottom: 1px solid #1E97EC;
width: 200px;
height: 38px;
line-height: 38px;
text-align: center;
display: inline-block;
position: relative;
margin-right: 20px;
cursor: pointer;
}
.left,.right {
position: absolute;
top: -1px;
}
.left {
left: 0px;
}
.right {
right: 1px;
}
.left:before,.right:before {
position: absolute;
content: "";
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent
transparent transparent #1E97EC;
left: 1px;
}
.left:after,.right:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent
transparent transparent #FFF;
left:
-1px;
}
.nav-left {
border-left: 1px solid #1E97EC;
}
.nav-right {
border-right: 1px solid #1E97EC;
}
.no-permission {
background-color: rgba(0,0,0, .6);
}
.nav .active {
background-color: rgba(30, 151, 236, 0.6);;
}
.nav .active .right:after {
border-color: transparent transparent transparent rgb(120, 192,
243);
}
html:
你好
你好
你好
你好
你好
js:
$('.nav-item').on('click',function(){
if(!$(this).hasClass('no-permission')){
$(this).addClass("active").siblings('.nav-item').removeClass('active');
}
})