jquery and css3 realize panda tv navigation code sharing-JS Tutorial-php.cn

jquery and css3 realize panda tv navigation code sharing

小云云

Release： 2018-02-22 15:19:12

Original

1651 people have browsed it

This article mainly shares with you in detail jquery+css3 to write the effect of panda tv navigation, as well as code sharing. Friends who like it can refer to it. Hope it helps everyone.

Implementation principle

Please see the following source code

<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>

Copy after login

The code corresponding to the green box is p with class ph-nav_shadow.

Use jquery to change the left and width values of the mask layer (.ph-nav_shadow), and add CSS3 animation effects to realize the animation of the green box.

Call jquery to add and delete the li tag class to change the text color. (.ph-nav_item--current).

Specific implementation

Write html code

 <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>

Copy after login

Write css code

.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;
}

Copy after login

Write js code (mainly)

$(document).ready(function() { 
  $(".header_nav ul li").hover(function() { 

    var change = getLiData($(this));
    $(".header_nav_shadow").css(&#39;left&#39;,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(&#39;left&#39;,0).width(&#39;72&#39;);
    $(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<li.index();i++){
    left+=$(".header_nav ul li:eq("+i+")").width();
  }
  var change=[left,li.width()];
  return change;
}

Copy after login

Related recommendations:

vue 2.0 and elementUI implement breadcrumb navigation bar method code

css3 implements mouse following navigation effect

Bootstrap implementation Detailed explanation of navigation bar examples

The above is the detailed content of jquery and css3 realize panda tv navigation code sharing. For more information, please follow other related articles on the PHP Chinese website!