슬라이드 탭 메뉴

슬라이드 탭 메뉴

QA

슬라이드 탭 메뉴

본문

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

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

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

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

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

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

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

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

 


 
.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

indicater의 js indi값을 변경해주면 되지 않을까요?

답변을 작성하시기 전에 로그인 해주세요.
전체 14
QA 내용 검색
filter #menu ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT