前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >0行JS,30行css搞定导航栏下划线跟随效果

0行JS,30行css搞定导航栏下划线跟随效果

作者头像
Javanx
发布2019-09-04 10:30:21
3.3K0
发布2019-09-04 10:30:21
举报
文章被收录于专栏:web秀

前言

在码代码之前了,我们可以尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果?

在这之前了,有一次需求就是实现这个效果,我是用js实现的。其实用 Javascript ,也是很麻烦。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢?

好的,今天我们就用CSS完成这个效果。

解析

我们定义一下简单的规则,要求如下:

1、假设 HTML 结构如下:

代码语言:javascript
复制
<ul class="cssnav">
  <li>Web秀</li>
  <li>CSS导航栏</li>
  <li>今日头条</li>
  <li>开源中国</li>
</ul>

2、li 的宽度是不固定的

3、当从左侧 li 移向右侧 li,下划线从左往右移动。同理,当从导航的右侧 li 移向左侧 li,下划线从右往左移动。

看整个效果,我们不知道如何做起的时候,我们先一步一步来,先完成前2个效果。

第一步

代码语言:javascript
复制
.cssnav {
    position: absolute;
    display: flex;
}

.cssnav li {
    position: relative;
    list-style: none;
    padding: 20px;
    font-size: 24px;
    color: #000;
    line-height: 1;
    cursor: pointer;
}

这里用到了flex布局,相信一直和我一起学习的小伙伴,应该都会了,这里不做过多的解释了,不明白的,请看:

《CSS中Flex布局的可伸缩性(Flexibility)》

《CSS3中Flex布局(弹性布局)》

《CSS3实现瀑布流布局(display: flex/column-count/display: grid)》

第二步

很多小伙伴,应该第一想法是用border-bottom来实现下面的底边效果。但是是不是忽视了整个li是不能移动的了?所以这个是行不通的,我们用:before伪类来实现底边,同时可以移动。

代码语言:javascript
复制
li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: 2px solid #000;
}

这样,我们距离成功越来越近了。

下面我们考虑动画部分,hover 的时候,下划线要从一侧展开。所以,我们利用绝对定位,将 li 的伪元素的宽度设置为0,在 hover 的时候,宽度从 width: 0 -> width: 100%,CSS 如下:

代码语言:javascript
复制
li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
}

li:hover::before {
    width: 100%;
}

额,这时候的效果并不对,好像缺少了过渡效果,很僵硬。于是添加过渡效果。

代码语言:javascript
复制
li::before {
    ...
    transition: 0.2s all linear;
}

于是,就有了这个效果。细心的小伙伴是不是发现,效果还是不对了?如果看不出来的小伙伴,可以把过渡效果时间设置长一点(0.5s)。第一个 li 的方向是正确了,但是第二个 li下划线的移动方向又错误了。

~ 选择符

所以,我们需要一种方法,能够不改变当前 hover 的 li 的下划线移动方式,却能改变它下一个 li 的下划线的移动方式。

这里我们可以借助 ~ 选择符**,完成最重要的部分。**

对于当前 hover 的 li ,其对应伪元素的下划线的定位是 left: 100%,而对于 li:hover ~ li::before,它们的定位是 left: 0。

代码语言:javascript
复制
li:hover::before {
    width: 100%;
    left: 0;
}

li:hover ~ li::before {
    left: 0;
}

ok,效果已经全部搞定,是不是超级简单了?

如果觉得效果有点僵硬,我们可以再添加动画延迟。

代码语言:javascript
复制
li:hover::before {
    width: 100%;
    top: 0;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: #000;
    z-index: -1;
}

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年1月25日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 解析
  • 第一步
  • 第二步
  • ~ 选择符
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档