實現導航欄下劃線跟隨效果

U2FsdGVkX1x 發布于2019-04-23 11:50 / 1742人閱讀

摘要：就像上圖這樣的動畫效果在導航欄里的時候，下劃線跟隨鼠標移動，鼠標移出導航欄時，下劃線回到初始位置，同時要適應導航的寬度為了適應導航的寬度，就不能給導航元素設置，然后將導航元素的設置給下劃線然后需要讓下劃線獨立于導航之外，從而保證

就像上圖這樣的動畫效果

在導航欄里的時候，下劃線跟隨鼠標移動，鼠標移出導航欄時，下劃線回到初始位置，同時要適應導航的寬度

為了適應導航的寬度，就不能給導航元素設置 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切換效果導航跟隨滾動條跟隨效果導航欄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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