切换模块下划线跟随效果

效果

下划线跟随.gif

*

  经常看到一些网页的导航栏点击切换时，不仅改变当前样式，同时下划线会跟随鼠标点击的标签栏缓慢滑到相应位置，那么这个简单而又好看的效果是如何实现的呢？

---

实现

1. 环境/依赖
2. 分析
3. 代码

1. 环境/依赖

• 原生JavaScript / jQuery

2. 分析

  首先给出基本布局（如下）。html及css都是基础布局，active样式则是当点击某个li标签时动态添加即可。那么下划线我们如何处理呢？

// html
<ul class="menu">
    <li>Hey</li>
    <li>ClickMe</li>
    <li>I'mIndex</li>
    <li>AboutMe</li>
    <li>MyCultureWall</li>
</ul>


// css
<style>
    ul{display: inline-block;text-align: center;padding: 0;position: relative;list-style: none;transition: all .4s ease-in;}
    ul li{display: inline-block;cursor: pointer;padding: 5px 10px;transition: all .5s ease-in;}
    .active{color: deepskyblue;transition: all .5s ease-in;}
</style>

  第一反应肯定是使用border-bottom。如果仅仅是切换，那么它完全可以满足需求，但是前面我们提到了，要动起来，显然，border暂时还做不到这一步。
  此路不通，next one.如果我们用一个新的div来绑定到当前ul上，是否能满足需求呢？have a try.我在li标签同级增加一个div元素，给出一个定高不定宽的线段，宽度则跟随当前所点击的li标签走。然后定位在ul下方，这样视觉效果则是下划线位置。思路明确了，接下来要做的就是在js中来获取想要的宽度和定位左边距即可。

3. 代码

// html
<ul class="menu">
    <li>Hey</li>
    <li>ClickMe</li>
    <li>I'mIndex</li>
    <li>AboutMe</li>
    <li>MyCultureWall</li>
++  <div class="slider"></div>
</ul>


// css
<style>
    ul{display: inline-block;text-align: center;padding: 0;position: relative;list-style: none;transition: all .4s ease-in;}
    ul li{display: inline-block;cursor: pointer;padding: 5px 10px;transition: all .5s ease-in;}
    .active{color: deepskyblue;transition: all .5s ease-in;}
++  .slider{width: 0;height: 3px;position: relative;transition: all .5s ease-in;}
</style>

// js
<script>
$('.menu').on('click', 'li', function () {
    // 获取所需要的 宽、左边距， 此处新增一个随机色
    let liWidth = $(this).width(),
        offsetLeft = $(this).offset().left,
        color = `rgba(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},0.9)`;
    // 点击时，当前标签添加active样式，‘下划线’也随之变化
    $(this).addClass('active').siblings().removeClass('active');
    $('.slider').css({'width': `${liWidth}px`,'left': `${offsetLeft}px`,'background': `${color}`});
})
</script>