슬라이드 탭 메뉴
본문
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();
});
답변을 작성하시기 전에 로그인 해주세요.
