슬라이드 탭 메뉴 채택완료

인찌

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전 조회 2,649

답변 1

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;

    }

 

 

 

            광고 & 프로모션

            컨텐츠 & 경험

            소셜 & 관계

            커머스 & 세일즈

            데이터

            관리

            

        

 

 







 

 

$(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();

    });

#javascript #tab #menu