切换模块下划线跟随效果

效果

切换标签下划线跟随

*

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


实现

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

1. 环境/依赖

  • 原生JavaScript / jQuery

2. 分析

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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. 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 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>
---本文结束感谢您的阅读---

本文标题:切换模块下划线跟随效果

文章作者:Lomo 朱幸民

发布时间:2019年06月13日 - 13:51:22

最后更新:2019年07月10日 - 08:45:48

原始链接:https://www.zhuxingmin.com/2019/06/13/切换模块下划线跟随效果/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

请作者喝杯咖啡吧~
0%