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. 상수 생성
  2. 마우스가 올라갈 때의 함수를 생성
  3. 마우스가 떠날 때의 함수를 생성
  4. 효과를 적용, 해제하는 함수 실행

코드 분석

  1. 상수 생성

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

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

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

    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)`);
    }
    

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

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

    function handleLeave() {
     this.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));
    

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

찾아본 내용, 알게된 내용들

contains - 안에 요소, 속성 등 내용을 확인해 참, 거짓을 반환하는 메소드


'개발 > JavaScript30' 카테고리의 다른 글

28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
24. Sticky Nav  (0) 2017.04.18
23. Speech Synthesis  (0) 2017.04.18

+ Recent posts