메뉴 밑줄 슬라이딩 애니메이션 만들기

html

  <div class="task-tabs">
          <div id="under-line"></div>
          <div>All</div>
          <div>Not Done</div>
          <div>Done</div>
  </div>

css

#under-line {
  height: 4px;
  background-color: pink;
  position: absolute;
  width: 60px;
  left: 0px;
  top: 52px;
  padding: 0px;
}

position:absolute를 통해서 원하는 메뉴 위치에 나타날 수 있도록 조정한다
js

let tabs = document.querySelectorAll('.task-tabs div');
let underLine =document.querySelector("#under-line");


let underLineIndicator = (e) => {
  underLine.style.left = e.currentTarget.offsetLeft + 'px';
  underLine.style.width = e.currentTarget.offsetWidth + 'px';
  underLine.style.top =
    e.currentTarget.offsetTop + e.currentTarget.offsetHeight + 'px';
};

tabs.forEach((menu) =>
  menu.addEventListener('click', (e) => underLineIndicator(e))
);