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代码（主要）

相关推荐：

vue 2.0和elementUI实现面包屑导航栏方法代码

css3实现鼠标跟随导航效果

Bootstrap实现导航条实例详解

以上就是jquery和css3实现熊猫tv导航代码分享的详细内容，更多请关注Gxl网其它相关文章！