效果
下划线跟随. gif
*
经常看到一些网页的导航栏点击切换时, 不仅改变当前样式, 同时下划线会跟随鼠标点击的标签栏缓慢滑到相应位置, 那么这个简单而又好看的效果是如何实现的呢?
实现
环境 / 依赖
分析
代码
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>
来源: http://www.jianshu.com/p/f3b73a16cf85