탭메뉴 움직이기

📍탭메뉴 움직이기

<div class="tab_menu">
    <ul>
        <li>...</li>
        <li>...</li>
    </ul>
    <span class="highlight"></span>
</div>

div안에 highlight라는 요소를 추가한다
li 밑에서 움직여야 하기 때문이다.

그리고 기존 탭메뉴 코드에서 highlight를 움직이는 코드를 추가해준다.

 tablist.forEach((a,i) =>{
         tablist[i].addEventListener("click",(e)=>{
             e.preventDefault();
           content.forEach((content)=>{
                 content.classList.remove('active'); 
             })
            tablist.forEach((tablist)=>{
                tablist.classList.remove('highlight');
            })
             content[i].classList.add('active');
            // tablist의 각 li들의 Y축 값을 가져온다.
             highlight.style.left = tablist[i].offsetLeft + "px";
        })
    })

스타일을 아래와 같이 했다.

.tab_menu{
	position:relative;
}
.tab_menu .highlight{
    position: absolute;
    left: 75px;
    top: 0;
    display: block;
    width: 190px;
    height: 50px;
    border-radius: 30px;
    z-index: -1;
    background-color: #00AAAA;
    transition: 0.4s ease-in-out; //0.4초동안 진행되도록 했다.
    color: #Fff;
}