PP助手-菜单栏下划线延伸效果

2014-05-03 23:25:30 +0800

此代码仅供参考

代码说明

添加说明文字

html代码

<style> 
.top_bar_zone {
	width: 100%;
	height: 80px;
	line-height: 80px;
	font-size: 16px;
	color: #fff;
	background: #fff;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.04);
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.04);
	-ms-box-shadow: 0 2px 5px 0 rgba(0,0,0,.04);
	-o-box-shadow: 0 2px 5px 0 rgba(0,0,0,.04);
	-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.04)
}

.top_bar li {
	float: left;
	cursor: pointer;
	height: 80px;
	margin: 0 15px
}

.top_bar li a {
	display: inline-block;
	position: relative;
	height: 80px;
	line-height: 80px;
	color: #000
}

.top_bar li a:after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 2px;
	opacity: 0;
	background-color: #43b1fa;
	transition: all .2s
}

.top_bar li a:hover:after {
	left: 0;
	right: 0;
	opacity: 1
}

.top_bar li a:hover {
	color: #43b1fa
}
</style>

<div class="top_bar_zone" data-stat-area="navBar">
<ul class="top_bar">
<li><a href="/" data-stat-pos="homepage">首页</a></li>
<li><a href="http://pro.25pp.com/" target="_blank" data-stat-pos="product">产品大全</a></li>
<li><a href="http://www.25pp.com/ios/" data-stat-pos="iosMarket">苹果市场</a></li>
<li><a href="http://www.25pp.com/android/" data-stat-pos="androidMarket">安卓市场</a></li>
<li><a href="http://www.25pp.com/news/" data-stat-pos="info">资讯</a></li>
<li><a href="http://jailbreak.25pp.com/" target="_blank" data-stat-pos="jb">越狱</a></li>
<li><a href="http://bbs.25pp.com/" target="_blank" data-stat-pos="forum">论坛</a></li>
<li><a href="https://pay.25pp.com/" target="_blank" data-stat-pos="paycenter">充值平台</a></li>
<li class="margin_none"><a href="http://dev.pp.cn/" target="_blank" data-stat-pos="devcenter">开放平台</a></li>
</ul>
</div>

代码演示

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N