这次给大家带来jquery+css3做出直播平台的导航，jquery+css3做出直播平台导航注意事项有哪些，下面就是实战案例，一起来看一下。
实现原理
请看以下源代码
<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代码（主要）
$(document).ready(function() {    $(.header_nav ul li).hover(function() {      var change = getlidata($(this));     $(.header_nav_shadow).css('left',change[0]).width(change[1]);     $(.header_nav ul).children(li:first-child).removeclass(header_nav_li-hover);      $(this).addclass(header_nav_li-hover);    }, function() {      $(.header_nav_shadow).css('left',0).width('72');     $(this).removeclass(header_nav_li-hover);      $(.header_nav ul).children(li:first-child).addclass(header_nav_li-hover);   });  }); // 根据this li 获取需要改变的长度和偏移量 function getlidata(li){   var left = 0;   for(let i=0;i 相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery添加li标签以及添加属性的方法
如何实现滚动条滑到底部时自动加载更多内容
鼠标响应式透明度渐变效果的实现
以上就是jquery+css3做出直播平台的导航的详细内容。