jquery和css3实现熊猫tv导航代码分享

来源：宝玛科技网

本文主要给大家详细分享的是jquery+css3来写出熊猫tv导航的效果，以及代码分享，喜欢的朋友参考下。希望能帮助到大家。

实现原理

请看以下源代码

<p class="ph-nav" data-pdt-block="pheader-n">
 <p class="ph-nav_shadow" style="left: 0px; width: 62px;"></p>
 <ul>
 <li class="ph-nav_item ph-nav_item--current">
 <a href="/" rel="external nofollow" >
 首页
 
 </a>
 </li>
 <li class="ph-nav_item">
 <a href="/all" rel="external nofollow" >
 全部
 </a>
 </li>
 ...
 </ul>
</p>

绿色的框对应的代码是class为ph-nav_shadow的p。

通过jquery来改变遮罩层（.ph-nav_shadow）的left与width值，css3加上动画效果实现绿色框的动画。

通话jquery对li标签类的添加与删除实现文字颜色的变化。（.ph-nav_item--current）。

具体实现

编写html代码

 <header>
 <p class="w">
 <p class="header_logo l"><img src="img/logo.png" alt=""></p>
 <p class="header_nav r">
 <p class="header_nav_shadow"></p>
 <ul>
 <li class="header_nav_li-hover"><a href="">首页</a></li>
 <li><a href="">智能家居</a></li>
 <li><a href="">案例展示</a></li>
 <li><a href="">致创能源</a></li>
 <li><a href="">答疑解惑</a></li>
 <li><a href="">合作加盟</a></li> 
 </ul>
 </p>
 </p> 
 </header>

编写css代码

.header_nav{
 width: 592px;
 height: 50px;
 position: relative;
}
.header_nav_shadow{
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 width: 72px;
 background: #F29400;
 transition: all ease-in-out .3s;
 z-index: 1;
}
.header_nav ul li{
 display: block;
 float: left;
 overflow: hidden;
 height: 50px;
 line-height: 50px;
 transition: all ease-in-out .3s;
 position: relative;
 z-index: 2;
}
.header_nav_li-hover a{
 color: #fff;
}
.header_nav ul li a{
 display: block;
 padding: 0 20px;
 height: 50px;
 line-height: 50px;
 transition: all ease-in-out .3s;
}

编写js代码（主要）

显示全文

全部频道

jquery和css3实现熊猫tv导航代码分享