废话不说,先上图:
效果是用css3的:after来实现的,不增加或改变html;绝对定位把横线定在菜单顶部或底部,不影响文档流。
代码部分:
/*html*/
<ul>
<li><a href=#>link1</a></li>
<li><a href=#>link2</a></li>
<li><a href=#>link3</a></li>
</ul>
/*css*/
ul,li{
display:inline-block;
}
a,a:link{
color:#000;
text-decoration:none;
position:relative;
padding:10px 15px;
}
a:after{
content: "";
width: 0;
height: 3px;
background: #337ab7;
position: absolute;
bottom: 0;
left: 50%;
transition: all .2s;
}
a:hover:after,a.active:after{
left: 0%;
width: 100%;
}
demo效果:
当前页菜单指示只要在a标签加上 .active 就可以了