Day26: Stripe Follow Along Nav

簡介：如何使用 JavaScript 和 CSS 來實現跟隨滑鼠移動的導航欄效果。

作品頁面：https://iris1114.github.io/javascript30/26_Stripe-Follow-Along-Nav/

HTML

包含一個 nav 元素，內部有多個 a 連結和下拉菜單。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Follow Along Nav</title>
  </head>
  <body>
    <h2>Cool</h2>
    <nav class="top">
      <div class="dropdownBackground">
        <span class="arrow"></span>
      </div>

      <ul class="cool">
        <li>
          <a href="#">About Me</a>
          <div class="dropdown dropdown1">
            <div class="bio">
              <img src="https://logo.clearbit.com/wesbos.com" />
              <p>
                Wes Bos sure does love web development. He teaches things like JavaScript, CSS and
                BBQ. Wait. BBQ isn't part of web development. It should be though!
              </p>
            </div>
          </div>
        </li>
        <li>
          <a href="#">Courses</a>
          <ul class="dropdown courses">
            <li>
              <span class="code">RFB</span>
              <a href="https://ReactForBeginners.com">React For Beginners</a>
            </li>
            <li>
              <span class="code">ES6</span>
              <a href="https://ES6.io">ES6 For Everyone</a>
            </li>
            <li>
              <span class="code">NODE</span>
              <a href="https://LearnNode.com">Learn Node</a>
            </li>
            <li>
              <span class="code">STPU</span>
              <a href="https://SublimeTextBook.com">Sublime Text Power User</a>
            </li>
            <li>
              <span class="code">WTF</span>
              <a href="http://Flexbox.io">What The Flexbox?!</a>
            </li>
            <li>
              <span class="code">GRID</span>
              <a href="https://CSSGrid.io">CSS Grid</a>
            </li>
            <li>
              <span class="code">LRX</span>
              <a href="http://LearnRedux.com">Learn Redux</a>
            </li>
            <li>
              <span class="code">CLPU</span>
              <a href="http://CommandLinePowerUser.com">Command Line Power User</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Other Links</a>
          <ul class="dropdown dropdown3">
            <li><a class="button" href="http://twitter.com/wesbos">Tweet</a></li>
            <li><a class="button" href="http://facebook.com/wesbos.developer">Facebook</a></li>
          </ul>
        </li>
      </ul>
    </nav>

    <script src="scripts.js"></script>
  </body>
</html>

CSS

設定了基本的頁面樣式，包括字體、顏色和佈局。
設置了導航欄和下拉菜單的樣式。

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

h2 {
  text-align: center;
  margin-top: 50px;
}

nav {
  background: #333;
  color: #fff;
  padding: 1rem;
  position: relative;
}

.cool {
  list-style: none;
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0;
}

.cool li {
  position: relative;
}

.cool a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  padding: 0.5rem 1rem;
  display: block;
}

.dropdownBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  transition: all 0.2s;
  transform: translateY(-100%);
  z-index: -1;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  color: #333;
  padding: 1rem;
  display: none;
}

.cool li:hover .dropdown {
  display: block;
}

.arrow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(255, 255, 255, 0.1);
  transform: translateX(-50%);
}

JavaScript

使用 JavaScript 來實現跟隨滑鼠移動的導航欄效果。

const triggers = document.querySelectorAll('.cool > li')
const background = document.querySelector('.dropdownBackground')
const nav = document.querySelector('.top')

// 當滑鼠進入連結時觸發
function handleEnter() {
  this.classList.add('trigger-enter')
  setTimeout(
    () => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'),
    150
  )
  background.classList.add('open')

  const dropdown = this.querySelector('.dropdown')
  const dropdownCoords = dropdown.getBoundingClientRect()
  const navCoords = nav.getBoundingClientRect()

  const coords = {
    height: dropdownCoords.height,
    width: dropdownCoords.width,
    top: dropdownCoords.top - navCoords.top,
    left: dropdownCoords.left - navCoords.left,
  }

  background.style.setProperty('width', `${coords.width}px`)
  background.style.setProperty('height', `${coords.height}px`)
  background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`)
}

// 當滑鼠離開連結時觸發
function handleLeave() {
  this.classList.remove('trigger-enter', 'trigger-enter-active')
  background.classList.remove('open')
}

triggers.forEach((trigger) => trigger.addEventListener('mouseenter', handleEnter))
triggers.forEach((trigger) => trigger.addEventListener('mouseleave', handleLeave))

Note

使用 getBoundingClientRect 來獲取下拉菜單的位置和大小。
使用 setTimeout 來延遲添加 CSS 類，以實現過渡效果。
使用 mouseenter 和 mouseleave 事件來觸發和取消高亮效果。

這些筆記涵蓋了檔案中的主要概念和範例，幫助理解如何使用 JavaScript 和 CSS 來實現跟隨滑鼠移動的導航欄效果。