Day26: Stripe Follow Along Nav

Introduction: How to create a follow-along navigation effect using JavaScript and CSS.

Project Page: https://iris1114.github.io/javascript30/26_Stripe-Follow-Along-Nav/

HTML

Contains a nav element with multiple a links and dropdown menus.

<!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

Sets basic page styles, including fonts, colors, and layout.
Styles for the navigation bar and dropdown menus.

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

Uses JavaScript to implement the follow-along navigation effect.

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

// Triggered when the mouse enters the link
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)`
  )
}

// Triggered when the mouse leaves the link
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

Uses getBoundingClientRect to get the position and size of the dropdown menu.
Uses setTimeout to delay adding CSS classes for transition effects.
Uses mouseenter and mouseleave events to trigger and cancel the highlight effect.

These notes cover the main concepts and examples in the file, helping to understand how to use JavaScript and CSS to create a follow-along navigation effect.