[JavaScript 30일 챌린지] : 26일차

---

<script>
  consttriggers=document.querySelectorAll('.cool > li');
  constbackground=document.querySelector('.dropdownBackground');
  constnav=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));
</script>

마우스를 올리면 dropdown 방식으로 메뉴가 펼쳐지는 프로젝트이다.

홈페이지를 돌아다니다 보면 많이 보이는 방식인데 메뉴에 따라 크기도 알아서 바뀌는 모습을 볼 수있다.