👻서론

https://images.velog.io/images/soonmac/post/75e06846-a2bb-451a-83b8-a646788397e7/3-1.gif

(포트폴리오에 들어간 내비게이션) 깔끔하면서도 역동적인(?) 내비게이션 효과를 만들고 싶어서 유튭 강의와 코드펜에 올라온 코드들을 참고해서 만들었습니다.

TIL용으로 코드펜에 바닐라JS로 심플하게 정리했습니다.

https://codepen.io/soonmac/pen/yLogXzx

코드펜에 작성한 내용을 바탕으로 설명드리겠습니다!

👻HTML 작성

    <nav id="nav" class="nav">
        <ul class="nav__menu">
            <li><a href="#one"class="nav__menu--foused">ONE</a></li>
            <li><a href="#two">TWO</a></li>
            <li><a href="#three">THREE</a></li>
            <li><a href="#four">FOUR</a></li>
            <div class="marker"></div>
        </ul>
    </nav>
    <section id="one">one</section>
    <section id="two">two</section>
    <section id="three">three</section>
    <section id="four">four</section>

nav를 만들어서 안에 메뉴를 집어넣어주고 href를 해당 섹션의 id 값으로 설정해줍니다. marker도 만들어 주시는 거 잊지말기!

👻CSS

너무 길어서 marker 부분만 정리...

.marker {
  content: "";
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  width: 0%;
  height: 3px;
  background-color: purple;
  transition: 0.2s;
}

width와 left는 javaScript에서 설정하는 부분입니다. 스크롤을 하면 보이는 설정이기 때문에 width를 0으로 했습니다. left는 왜 50%로 했냐 새로고침을 했을 때 nav의 왼쪽 끝에서 marker가 달려오는 것보다 가운데에서 달려오는 게 좀 더 멋있기때문입니다. 취향대로 하시면 됩니다.

👻javaScript

marker의 위치와 길이를 설정하는 함수

const marker=document.querySelector(".marker");
function setMarker(e) {
    marker.style.left = e.offsetLeft+"px";
    marker.style.width = e.offsetWidth+"px";
}