[CSS] CSS 형제 선택자 이용해서 메뉴바 애니메이션 만들기! + JavaScript

애니메이션

웹사이트에서 메뉴바, 사이드바를 보면 위의 이미지 처럼 밑에 또는 뒤에 바가 애니메이션이 것을 많이 보셨을 겁니다.
그리하여 이번에는 CSS 애니메이션을 공부하고 정리할 겸 위의 이미지에 보이는 메뉴바 애니메이션을 만들어 보았습니다.

HTML

메뉴를 만드는 방법은 여러가지의 방법과 다양한 태그로 만들 수 있지만 이번에 중요한 부분은 CSS이기 때문에 간단하게 nav와 div 그리고 애니메이션을 위한 span으로 구성을 하였습니다.

<nav>
  <div>메뉴1</div>
  <div>메뉴2</div>
  <div>메뉴3</div>
  <div>메뉴4</div>
  <div>메뉴5</div>
  <span class="animation"></span>
</nav>

CSS

메뉴바 애니메이션에서 가장 중요한 부분이 바로 CSS입니다.
우선 메뉴들을 옆으로 나열해주기 위해서 flex를 사용하였습니다.

nav {
  position: relative; // 애니메이션을 위한 기준
  display: flex;
  height: 60px;
}

nav div {
  width: 200px;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}

nav div:hover {
  background: #eee;
}

그리고 이제 애니메이션을 시켜줄 span입니다.
우선 기본적인 형태를 표현하고 position: absolute;로 위치를 잡아줬습니다.

nav .animation {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  height: 2px;
  background-color: #0022ff;
  transition: 0.5s; // 위치가 변할 때 부드럽게 애니메이션이 되도록 설정
}

이제 제일 중요한 부분입니다.
메뉴가 클릭이 되면 active 클래스를 추가하고, 클래스가 추가되어있는 div의 위치에 따라 span의 left 값을 변경해주면 됩니다.

nav div:nth-child(1).active ~ .animation {
  left: 0;
}
nav div:nth-child(2).active ~ .animation {
  left: 200px;
}
nav div:nth-child(3).active ~ .animation {
  left: 400px;
}
nav div:nth-child(4).active ~ .animation {
  left: 600px;
}
nav div:nth-child(5).active ~ .animation {
  left: 800px;
}

~ 선택자는 형제 선택자로 앞에 해당하는 div:nth-child(n).active의 아래에 있는 모든 .animation 요소를 선택을 합니다.
하나의 경우만 살펴보면 nav div:nth-child(1).active ~ .animation은 nav의 첫 번째 div의 active 클래스가 있으면 그 아래에 형제로 있는 .animation에 위치를 변경을 해줍니다.

JavaScript - Click 이벤트 추가

JavaScript에서는 클릭이벤트를 추가해서 해당 div에 active 클래스를 추가해주고 나머지 div의 클래스는 모두 제거를 해주면 됩니다.

const $$div = document.querySelectorAll('div')
const handleToggleActive = (e) => {
  const target = e.target
  $$div.forEach((div) => {
    div.classList.remove('active')
  })
  target.classList.add('active')
}
$$div.forEach((div) => {
  div.addEventListener('click', handleToggleActive)
})