슬라이드 탭 메뉴

슬라이드 탭 메뉴 채택완료

https://codepen.io/Kapilnemo/pen/pbEbQy

위와 같은 효과를 만들어내고 싶습니다.

저는 아래코드로 탭메뉴를 만들었습니다.

메뉴를 클릭했을때 아래 바형태만 옆으로 이동하게 하고싶은데.

저는 li 요소들이 다 가로 너비도 다르고

display: flex로 가운데에 맞춰놨거든요.

혹시 위와같은 효과를 가로가 다 다른 것에 적용할때는 어떻게 해야하는지

힌트라도 주실수 있을까요?

Copy

.tabnav {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin: 29px 0 40px 0;
    }

 

 

 <ul class="tabnav">
            <li data-num="1" class="tab wave dark"><a href="#tab01">광고 & 프로모션</a></li>
            <li data-num="2" class="tab wave"><a href="#tab02" >컨텐츠 & 경험</a></li>
            <li data-num="3" class="tab wave"><a href="#tab03">소셜 & 관계</a></li>
            <li data-num="4" class="tab wave"><a href="#tab04">커머스 & 세일즈</a></li>
            <li data-num="5" class="tab wave"><a href="#tab05">데이터</a></li>
            <li data-num="6" class="tab wave"><a href="#tab06">관리</a></li>
            <div class="indicator"></div>
        </ul>

 

 <div class="tabcontent">
<div id="tab01" class="service_wrap">

</div>

</div>

 

 

$(function () {
        $('.tabcontent > div').hide();
        $('.tabnav a').click(function () {
            $('.tabcontent > div').hide().filter(this.hash).fadeIn();
            $('.tabnav a').removeClass('active');
            $(this).addClass('active');
            return false;
        }).filter(':eq(0)').click();
    });

슬라이드 탭 메뉴 채택완료

답변 1개

답변에 대한 댓글 1개

슬라이드 탭 메뉴 채택완료

답변 1개

답변에 대한 댓글 1개

공유하기