精品女同一区二区三区免费播放,弘扬主旋律,718娱乐圈的吃瓜传送门

技術(shù)頻道 - html技術(shù)

3款有下橫線平滑過渡效果的導航欄菜單

作者:admin 時間:2021-9-29 11:6:35 瀏覽:

導航欄菜單不應該做得呆板生硬，加上下橫線平滑過渡效果讓菜單在交互中變得更加有趣生動。本文介紹3款有下橫線平滑過渡效果的導航欄菜單。

1、純CSS導航欄菜單

該導航菜單是純CSS實現(xiàn)的，無用到JS代碼。它的特點是當鼠標移到菜單項目上時，下橫線會平滑過來。當鼠標移開后，下橫線消失。

demo download

2、CSS+JS導航欄菜單

該導航菜單是CSS+JS實現(xiàn)的，該實例包含有4種樣式可選。

它的特點是當鼠標點擊菜單項目時，下橫線會平滑過去，注意此下橫線有3種顏色，并且其形狀粗細均可自選。當鼠標移開后，下橫線不會消失。

demo download

該導航菜單雖然用到JS編程，但代碼相當簡單和十分之少，只有三行代碼，如下：

function ul(index) {
  var underlines = document.querySelectorAll(".underline");
  for (var i = 0; i < underlines.length; i++) {
    underlines[i].style.transform = 'translate3d(' + index * 100 + '%,0,0)';
  }
}

3、CSS+JS導航欄菜單

該導航菜單是CSS+JS實現(xiàn)的，當鼠標移到菜單項目上時，下橫線也跟隨著平滑過去，這時字體顏色變深。當鼠標移開后，下橫線不消失。

demo download

本實例中，下橫線顏色是不固定的。不過我們可以在JS代碼中自定義這幾種顏色。

const colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];

4、結(jié)論

本文介紹了3款有下橫線平滑過渡效果的導航欄菜單，第一款是純CSS實現(xiàn)，其代碼較少，菜單結(jié)構(gòu)簡單，樣式也簡單；第二、三款是第一款的改進版，不過是用CSS+JS來實現(xiàn)的，但是第二款的JS代碼就三行，相當簡單，而其樣式和呈現(xiàn)的效果卻相當豐富。喜歡的朋友可直接下載源碼使用。