26. Stripe Follow Along Nav ( JavaScript30 )

Dev/JavaScript30

26. Stripe Follow Along Nav ( JavaScript30 )

takeU 2021. 7. 11. 14:01

Stripe Follow Along Nav

목표

박스 크기에 맞춰 내용을 불러오는 네비게이션 바를 만들어 봄

기본 코드

<!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">CLPU</span>
            <a href="http://CommandLinePowerUser.com">Command Line Power User</a>
          </li>
          <li>
            <span class="code">MMD</span>
            <a href="http://MasteringMarkdown.com">Mastering Markdown</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Other Links</a>
        <ul class="dropdown dropdown3">
          <li><a class="button" href="http://twitter.com/wesbos">Twiter</a></li>
          <li><a class="button" href="http://facebook.com/wesbos.developer">Facebook</a></li>
        </ul>
      </li>
    </ul>
  </nav>
<script>
</script>
</body>
</html>

과정

상수 생성
마우스가 올라갈 때의 함수를 생성
마우스가 떠날 때의 함수를 생성
효과를 적용, 해제하는 함수 실행

코드 분석

1. 상수 생성

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

해당 클래스를 가지고 있는 태그를 상수에 각각 매치시켜 정의

2. 마우스가 올라갈 때의 함수를 생성

const handleEnter = e => {
    e.target.classList.add('trigger-enter');
    setTimeout(() => this.classList.contains('trigger-enter') && e.target.classList.add('trigger-enter-active'), 150);
    background.classList.add('open');

  const dropdown = e.target.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)`);
}

선택한 요소에 trigger-enter 클래스를 추가하고, 150ms뒤에 trigger-enter-active 클래스를 추가해
박스를 출력하고, 150ms 뒤에 내용을 추가함.
동시에 백그라운드에 open 클래스를 추가함
함수 내에서 지역변수를 생성하는데 이때 getBoundingClientRect는 요소의 크기를 잴 때 사용
coords에 박스의 길이와, 위치를 입력하고 스타일과 효과를 적용함

3. 마우스가 떠날 때의 함수를 생성

const handleLeave = e => {
  e.target.classList.remove('trigger-enter', 'trigger-enter-active');
    background.classList.remove('open');
}

handleLeave에 선택한 것이 trigger-enter, trigger-enter-active 클래스를 지우고,
background의 open 클래스를 지운다.

4. 효과를 적용, 해제하는 함수 실행

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

마우스를 올리고 내릴 때 효과를 해당하는 함수를 실행함

저작자표시 비영리 변경금지

현재글26. Stripe Follow Along Nav ( JavaScript30 )

takeU