实现导航栏下划线跟随效果

U2FsdGVkX1x 发布于2019-04-23 11:50 / 1682人阅读

摘要：就像上图这样的动画效果在导航栏里的时候，下划线跟随鼠标移动，鼠标移出导航栏时，下划线回到初始位置，同时要适应导航的宽度为了适应导航的宽度，就不能给导航元素设置，然后将导航元素的设置给下划线然后需要让下划线独立于导航之外，从而保证

就像上图这样的动画效果

在导航栏里的时候，下划线跟随鼠标移动，鼠标移出导航栏时，下划线回到初始位置，同时要适应导航的宽度

为了适应导航的宽度，就不能给导航元素设置 margin，然后将导航元素的 clientWidth 设置给下划线

然后需要让下划线独立于导航之外，从而保证它的无缝滑动（其实也可以用伪类元素实现，不过效果不够好）

再根据左侧导航的宽度总和，计算出下划线左移的距离

一、基本结构

基于上面的思路，HTML 结构可以设计成这样：

并将下划线的 width 和 left 设置为动态 style，在鼠标滑动时实时修改

然后给 MainHeader 和 Underline 添加 CSS 样式：

.main {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}

.nav-underline {
  position: absolute;
  bottom: 0;
  display: block;
  height: 2px;
  background-color: #000;
  transition: all .2s ease-out;
}

二、移动下划线

因为需要实时修改下划线的宽度，所以需要监听 mouseenter 事件，获取当前元素

但如果导航元素 nav 还有子元素 (比如上面的 nav-title)，直接用 event.target 就有问题

经过取舍，我决定获取 MainHeader 的 childNodes，然后根据 v-for 的 index 去查找对应的导航元素

在对应的事件处理函数里面，将导航元素的 clientWidth 设置为下划线的宽度

同时计算当前导航的左侧所有导航的宽度之和，作为下划线的左移距离

setCurrentNav (index) {
  // 鼠标移动到导航时，记录临时状态
  this.currentNav = index
  this.currentNavStyle = this.getNavStyle(index)
},
getNavStyle (index) { // 根据导航的 index 移动下划线
  let childNodes = this.$refs.MainHeader.childNodes
  // 根据当前导航的宽度，设置下划线的宽度
  let width = childNodes[index].clientWidth
  // 设置下划线的默认位置
  let left = 0
  if (index > 0) {
    // 计算左边导航的总宽度，设置为下划线的左移距离
    for (let i = 0; i < index; i++) {
      left += childNodes[i].clientWidth
    }
  }
  return {width, left}
}

最后在 computed 里面动态修改下划线样式

三、完善激活状态

上面实现了鼠标移动时候的下划线跟随效果

但对于点击导航后但激活状态 active 还没有做处理

在导航元素上添加 click 事件的处理函数，记录下激活元素的 index

setActiveNav (index) {
  // 点击导航时，设置激活样式
  this.activeNav = index
  this.activeNavStyle = this.getNavStyle(index)
}

当鼠标移出 MainHeader 的时候，下划线还得回到 active 的位置

上面已经对 navLineStyle() 做了兼容处理，所以只需要在鼠标移出的时候，清空 currentNavStyle 即可

handleLeaveMainHeader () {
  // 鼠标离开导航栏时，重置下划线状态
  this.currentNavStyle = null
}

四、纯CSS实现下划线跟随

参考链接：https://github.com/chokcoco/iCSS/issues/33

如果对于整个动画效果的要求不是特别高，可以用伪类元素实现下划线跟随

所以 HTML 结构里面就不用将下划线独立出来

然后使用 after 画出下划线

.nav {
  position: relative;
  overflow: hidden;

  &::after {
    content: ";
    position: absolute;
    bottom: 0;
    left: 100%;
    width: 0;
    height: 2px;
    background-color: #000;
    transition: all 0.3s ease-out;
  }
}

这里设置了 width: 0; left: 100%; 这是为了让下划线默认从右向左出现，然后从左向右消失

然后在 hover 状态下，将对应的 after 设置为 width: 100%; left: 0;

最后使用 CSS 中的相邻元素选择器 ( + ) 选择相邻的 after，设置左移为 left: 0;

.nav {
  &:hover {
    &::after {
      width: 100%;
      left: 0;
    }

    & + .nav::after {
      left: 0;
    }
  }
}

从而实现相邻下划线 after 能从左向右出现，动画连起来就像是下划线跟随鼠标滑动了

这种方式不够完美，但仅仅需要几行 CSS 就能实现，还是非常厉害的

云服务器 GPU云服务器导航栏tab切换效果导航跟随滚动条跟随效果导航栏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1231.html

tab 切换下划线跟随实现

摘要：代码大致如下点击跟随结合使用类即可实现点击跟随使用参考资料不可思议的光标下划线跟随效果不可思议的纯导航栏下划线跟随效果切换下划线跟随实现 showImg(https://segmentfault.com/img/bVbg4wM?w=699&h=91); HTML 结构如下：不可思议的CSS 导航栏光标小下划线跟随 PURE CSS Nav Underline ...

googollee 2019-08-02 16:05 评论0 收藏0
tab 切换下划线跟随实现

摘要：代码大致如下点击跟随结合使用类即可实现点击跟随使用参考资料不可思议的光标下划线跟随效果不可思议的纯导航栏下划线跟随效果切换下划线跟随实现 showImg(https://segmentfault.com/img/bVbg4wM?w=699&h=91); HTML 结构如下：不可思议的CSS 导航栏光标小下划线跟随 PURE CSS Nav Underline ...

antz 2019-08-23 12:01 评论0 收藏0
tab 切换下划线跟随实现

摘要：代码大致如下点击跟随结合使用类即可实现点击跟随使用参考资料不可思议的光标下划线跟随效果不可思议的纯导航栏下划线跟随效果切换下划线跟随实现 showImg(https://segmentfault.com/img/bVbg4wM?w=699&h=91); HTML 结构如下：不可思议的CSS 导航栏光标小下划线跟随 PURE CSS Nav Underline ...

CODING 2019-08-30 15:54 评论0 收藏0
网页导航栏 html + css的代码实现

摘要：一般来讲，我们的网页导航栏是这么个模式来构建在结构上首先我们需要给导航栏的给个类名一般为然后就是一个无序表格由于导航栏的文字一般都是链接用来跳转页面要在里面包含一个首页云云商城智慧门店营销平台媒体联盟关于云道在样式上目前我见过的分为两种导航一般来讲，我们的网页导航栏是这么个模式来构建在结构上：1.首先我们需要给导航栏的div 给个类名一般为nav2.然后就是一个无序表格 3.由于导航栏的文...

keke 2019-04-23 11:55 评论0 收藏0
绝对定位(Absolute positioning)

摘要：绝对定位的特性包裹性包裹性展示跟一样也具有包裹性两者的包裹性都类似于使元素化破坏性破坏性展示相对于引起父元素塌陷要更进一步上面的例子就可以看出元素完全脱离文档流并且被其它盒子以及盒子内的文本无视替代方案由于滥用会降低扩展性和维护性所以需要绝对定位的特性包裹性 absolute包裹性展示跟float一样,absolute也具有包裹性,两者的包裹性都类似于使元素inline-bloc...

gaomysion 2019-08-29 12:36 评论0 收藏0