jquery and css3 realize panda tv navigation code sharing

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>

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>

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

Write js code (mainly)

$(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<li.index();i++){
    left+=$(".header_nav ul li:eq("+i+")").width();
  }
  var change=[left,li.width()];
  return change;
}

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!