卡卡網(wǎng)

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

1、純CSS導(dǎo)航欄菜單

該導(dǎo)航菜單是純CSS實(shí)現(xiàn)的，無(wú)用到JS代碼。它的特點(diǎn)是當(dāng)鼠標(biāo)移到菜單項(xiàng)目上時(shí)，下橫線會(huì)平滑過(guò)來(lái)。當(dāng)鼠標(biāo)移開(kāi)后，下橫線消失。

demodownload

2、CSS+JS導(dǎo)航欄菜單

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

它的特點(diǎn)是當(dāng)鼠標(biāo)點(diǎn)擊菜單項(xiàng)目時(shí)，下橫線會(huì)平滑過(guò)去，注意此下橫線有3種顏色，并且其形狀粗細(xì)均可自選。當(dāng)鼠標(biāo)移開(kāi)后，下橫線不會(huì)消失。

demodownload

該導(dǎo)航菜單雖然用到JS編程，但代碼相當(dāng)簡(jiǎn)單和十分之少，只有三行代碼，如下：

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導(dǎo)航欄菜單

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

demodownload

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

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

4、結(jié)論

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

您可能對(duì)以下文章也感興趣

• 非常漂亮的響應(yīng)式導(dǎo)航欄設(shè)計(jì)
• 簡(jiǎn)單實(shí)用的響應(yīng)式導(dǎo)航菜單設(shè)計(jì)
• CSS3實(shí)現(xiàn)的可縮進(jìn)的側(cè)欄導(dǎo)航菜單
• 漂亮的純CSS3水平導(dǎo)航菜單（有過(guò)渡動(dòng)畫效果）
• 可以展開(kāi)和閉合子菜單的CSS3垂直導(dǎo)航菜單
• 又一個(gè)隨內(nèi)容滾動(dòng)而變化的側(cè)邊/左側(cè)目錄導(dǎo)航
• 側(cè)邊/左側(cè)目錄導(dǎo)航隨內(nèi)容滾動(dòng)而變化
• 純CSS：非常漂亮的左側(cè)導(dǎo)航/內(nèi)容目錄導(dǎo)航
• 簡(jiǎn)單卻實(shí)用的CSS水平和垂直導(dǎo)航欄【演示/源碼】
• CSS3+JQuery實(shí)現(xiàn)的三級(jí)下拉導(dǎo)航菜單

標(biāo)簽: 導(dǎo)航菜單  導(dǎo)航欄