드롭 ANIMATE 텝

텝 Animate 드롭 메뉴

01. CSS

.tab_type02 ul:after {content:""; display: block; clear:both;}
.tab_type02 li {float:left;/* width:25%;*/}
.tab_type02 li a{display:block; padding:10px; border:1px solid #ccc; text-align:center;}
.tab_type02 li.on a{background:#ccc; color:#fff; }
.tab_type02 .box_area { position: relative;}
.tab_type02 .box {border:1px solid #ccc; border-top:0; width:100%; padding:20px; position: absolute; background: orange; box-sizing:border-box;}
.tab_type02 .box:nth-child(1) {background: orange; z-index:10}
.tab_type02 .box:nth-child(2) {background: orchid}
.tab_type02 .box:nth-child(3) {background: darkgoldenrod}
.tab_type02 .box:nth-child(4) {background: palegoldenrod}
.tab_type02 .box:nth-child(5) {background: gold}
.tab_type02 .box:nth-child(6) {background: rebeccapurple; color:#fff;}

02. HTML 

<div id="wrap">
    <div class="tab_type02">
        <ul>
            <li class="on"><a href="#none">button01</a></li>
            <li><a href="#none">button02</a></li>
            <li><a href="#none">button03</a></li>
            <li><a href="#none">button04</a></li>
            <li><a href="#none">button05</a></li>
            <li><a href="#none">button06</a></li>
        </ul>
        <div class="box_area">            
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
        </div>
    </div>
    
</div>

03. jQuery 

$(function(){
    var max     
    var max_li = 100 / $(".tab_type02 ul li").length;
 
    $("ul li").css("width", max_li + "%") // li 의 width  값은 100% / li의 개수 값 
    $(".tab_type02 ul li").on("click", function(){
        var num = $(this).index();
        $(this).siblings().removeClass("on")
        $(this).addClass("on")
 
        $(this).parent().next().children().siblings().hide().css({"z-index" : 5}) // .stop().slideUp(200) hide 없을 경우 아래서 덮기.
        $(this).parent().next().find(":eq("+ num + ")").hide().stop().slideDown(200).css({"z-index" : 10});
            
        console.log(num)
        
    });
});

jQuery Animate Tab menu. 

드롭하는 텝메뉴 허접합니다...