切换模块下划线跟随效果

本文长度为 1751,建议阅读 5 分钟

▼▼▼

▼▼

效果

*

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

实现

  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>

* . 以上

原文发布于微信公众号 - 流眸(zxm0146)

原文发表时间:2019-06-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券