提升用戶體驗： jQuery 創建流暢滑動導航選單線條效果

在這篇教學文章中，我們將學習如何使用 jQuery 創建一個具有動態滑動線條效果的導航選單。可以為網站的導航菜單增添視覺吸引力，並在用戶懸停在菜單項目上時突出顯示當前選中的項目。

以下是我們實作後的完成的展示效果，通過這個教學，我們將學會了如何使用 jQuery 搭配CSS動畫，來創建一個動態滑動導航線條效果的選單。這個效果可以增強用戶對當前選中項目的感知，提升網站的用戶體驗。

現在，讓我們逐步深入實現這個效果的步驟。

步驟 1：設置 HTML 結構

首先，我們需要定義選單的 HTML 結構。我們將使用無序列表（<ul>）來表示菜單項目，並應用適當的類別以進行樣式設定和識別。

<header>
  <div id="nav-menu">
    <nav>
      <ul>
        <li class="menu-item"><a href="#">Menu 1</a></li>
        <li class="menu-item"><a href="#">Menu 2</a></li>
        <li class="menu-item"><a href="#">Menu 3</a></li>
        <li class="menu-item"><a href="#">Menu 4</a></li>
      </ul>
    </nav>
  </div>
</header>

步驟 2：實現 jQuery 代碼

接下來，我們將編寫 jQuery 代碼來實現動態滑動導航線條效果。以下是我們需要完成的主要步驟：

1. 使用 $(document).ready() 函數確保在文檔完全加載後執行代碼。

2. 使用 .hover() 函數監聽菜單項目的懸停事件。在懸停時，我們將獲取目標菜單項目的左側位置和寬度，並將這些值應用於滑動線。

3. 使用 .offset().left 方法獲取目標菜單項目的左側位置。

4. 使用 .outerWidth() 方法獲取元素的寬度，包括元素的內容寬度、填充和邊框。

5. 使用 .css() 方法將滑動線的位置和寬度設定為獲取的值。

6. 在懸停結束時，將滑動線恢復到初始位置。

$(document).ready(function () {
  $("#nav-menu").append(
    '<div class="line-nav" style="left:-80px; width: 96px;"></div>'
  );
  // 監聽 menu-link 的 hover 事件
  $("#nav-menu nav > ul > .menu-item").hover(
    function () {
      var menuPosition = $(this).offset().left; // 取得目標 menu 的左側位置
      var lineWidth = $(this).outerWidth(); // 取得目標 menu 的寬度
      console.log(lineWidth);
      $(".line-nav").css({
        left: menuPosition,
        width: lineWidth
      });
    },
    function () {
      // Hover 結束時將線條恢復到初始位置
      $(".line-nav").css({
        left: "calc(-80px)",
        width: "96px"
      });
    }
  );
});

步驟 3：美化選單樣式

為了使我們的選單具有視覺吸引力，我們將應用 CSS 樣式來美化選單外觀，包括線條、背景和字體等。

.line-nav {
  position: absolute;
  height: 2px;
  background-color: #000;
  transition: left 0.3s ease, width 0.3s ease;
}

如上這段CSS在做動畫滑動這個段中，我們使用了一個名為 .line-nav 的 CSS 類別來定義導航線條的樣式。這個元素被設置為絕對定位 (position: absolute;)，以便能夠在導航選單中進行準確的定位。線條的高度設置為 2 個像素 (height: 2px;)，並使用黑色作為背景顏色 (background-color: #000;)。

為了實現流暢的動態效果，我們使用了 CSS 的 transition 屬性。這裡我們指定了 left 和 width 屬性的過渡效果，時間為 0.3 秒，使用了 ease 的過渡函數 (transition: left 0.3s ease, width 0.3s ease;)。這使得當線條的位置或寬度發生變化時，會平滑地過渡到新的狀態，營造出一個流暢的動態效果。

藉由這些 CSS 屬性和過渡效果，我們能夠創建出一個令人驚艷的滑動導航線條效果，讓你的網站更加生動和吸引人。

完整CSS程式碼如下：

#nav-header {
  position: relative;
}

.line-nav {
  position: absolute;
  height: 2px;
  background-color: #000;
  transition: left 0.3s ease, width 0.3s ease;
}

#nav-menu nav  {
  position: relative;
}

#nav-menu nav  > ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

#nav-menu nav > ul > .menu-item {
  position: relative;
  padding: 0 30px;
}

#nav-menu nav > ul > .menu-item a {
  text-decoration: none;
  color: #000;
}

希望你能從這篇教學中受益，並將這個效果應用到你的網站中。