텝 메뉴

.tab_type03 .box_area, .tab_type03 ul.menu:after {content:""; display: block; clear:both;}
.tab_type03 .menu li {float:left;/* width:25%;*/}
.tab_type03 .menu li a{display:block; padding:10px; border:1px solid #ccc; text-align:center;}
.tab_type03 .menu li.on a{background:#ccc; color:#fff;}

.tab_type03 .box_area {width:100%; height:100px;  overflow:hidden;}
.tab_type03 .box_area ul{font-size:0; font-size:0; position:relative;}
.tab_type03 .box_area ul li{background: #ccc; padding:10px; box-sizing:border-box; float:left; height:100px; font-size:12px;}
.tab_type03 .box_area li:nth-child(2) {background: orchid}
.tab_type03 .box_area li:nth-child(3) {background: darkgoldenrod}
.tab_type03 .box_area li:nth-child(4) {background: palegoldenrod}
.tab_type03 .box_area li:nth-child(5) {background: olivedrab}

02. HTML 

<div id="wrap">
    <div class="tab_type03">
        <ul class="menu">
            <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>
        </ul>
        <div class="box_area">    
            <ul>
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>
</div>

03. jQuery 

$(function(){
 
        var max = $(".box_area li").length * 100; // ul의 width 값은 li의 갯수 X 100%  값
        var li_max = 100 / $(".box_area li").length; // li 의 width  값은 100% / li의 개수 값 
 
        $(".menu li").css("width", li_max + "%"); // li 의 width  값은 100% / li의 개수 값 
        $(".box_area ul").width(max + "%");    // ul의 width 값은 li의 갯수 X 100% 값
        $(".box_area li").css("width", li_max + "%"); //li 의 width  값은 100% / li의 개수 값 
        
        $(".menu li").mouseover(function(){
 
            var inx = $(this).index();
            var btn = $(this).parent().next().children();
            
            var w = inx * 100; // li 갯수 곱하기 100%  
 
            $(this).siblings().removeClass("on");
            $(this).addClass("on");
            
            btn.stop().animate({
                "left" : "-" + w + "%"
            }, 500 )// 속도제어 
            console.log(li_max)
            
        })
    });

jQuery Animate Tab menu. 

움직이는 텝메뉴 허접합니다...