tab slide

by hlee0126

HTML

<div class="tab_block">
						<div class="tab_navi_home">
							<ul>
								<li class="selected"><a href="#">All</a></li>
								<li><a href="#">Manual</a></li>
								<li><a href="#">General</a></li>
			                    <li><a href="#">Marketting</a></li>
			                    <li><a href="#">Sales</a></li>
			                    <li><a href="#">Purchase</a></li>
			                    <li><a href="#">Business Execution</a></li>
			                    <li><a href="#">Management</a></li>
			                    <li><a href="">aaaaaaaaaa</a></li>
			                    <li><a href="">aaaaaaaaaa</a></li>
			                    <li><a href="">aaaaaaaaaa</a></li>
							</ul>
						</div>
						<div class="tab_more">
							<button type="button" class="prev">이전</button><button type="button" class="next">다음</button>
						</div>
					</div>

CSS

.tab_block{position: relative; width:600px}
.tab_navi_home{overflow: hidden; height:40px}
.tab_navi_home ul{display: table;}
.tab_navi_home li{float: left; padding: 0 15px 0; border-bottom: 2px solid #cfd3d7; font-weight: bold; font-size: 14px; text-align: center; white-space: nowrap;}
.tab_navi_home li a{display: block; color: #597385; line-height: 35px;}
.tab_navi_home li:not(.more):hover{border-color:#1584ef}
.tab_navi_home li.selected{border-color: #003181;}
.tab_navi_home li:hover a,
.tab_navi_home li.selected a{color: #1c3a81;}

.tab_more{padding-right: 0; padding-left: 0; width: 70px; position: absolute; right: 0; top: 1px; background: #fff; border-bottom: 2px solid #cfd3d7;}
.tab_more button{position: relative ;display: inline-block; border: 1px solid #cfd3d7; border-bottom: 0; width: 35px; height: 34px; text-indent: -999em; background: none;}
.tab_more button + button{margin-left: -1px;}
.tab_more button:nth-child(1):after,
.tab_more button:nth-child(2):after{width: 0; height: 0; border-style: solid; position: absolute; content: ''; top: 13px; left: 13px;}
.tab_more button:nth-child(1):after{border-width: 4px 5px 4px 0; border-color: transparent #606772 transparent transparent; }
.tab_more button:nth-child(2):after{border-width: 4px 0 4px 5px; border-color: transparent transparent transparent #606772;}

JavaScript

var ul_width = $(".tab_navi_home").innerWidth();
	var li_sum = 0;
	var li_index = 0;
	var li_cnt = $(".tab_navi_home li").size();


	$('.tab_navi_home ul').children().each(function(){
	    li_sum = li_sum + $(this).innerWidth();
		$('.tab_navi_home ul').css({"width":li_sum+70+"px"});
	}); 


	var li_width = $(".tab_navi_home li").eq(li_index).innerWidth();
	var li_able =  li_sum - ul_width;
	var li_sub_total = 0;

	console.log('실제길이'+ul_width);
	console.log('전체길이'+li_sum);
	console.log('이동할수있는길이'+li_able);
	console.log('현재길이'+li_width);
	console.log('이동길이'+li_sub_total);


	$(".tab_more .next").click(function(){
		li_sub_total = li_sub_total + li_width ; 
		console.log('이동길이'+li_sub_total);
		console.log(li_index);
		if(li_cnt <= li_index || li_able <= li_sub_total + li_width){
			$(this).prop("disabled", true)
		}else{
			$(".tab_more .prev").prop("disabled", false)
			$(".tab_navi_home").animate({scrollLeft: "+="+$(".tab_navi_home li").eq(li_index).innerWidth()},300);
			li_index++;
		}

	});

	$(".tab_more .prev").click(function(){
		li_sub_total = li_sub_total - li_width ; 
		console.log('이동길이'+li_sub_total);
		console.log(li_index);
		if(li_index < 1 || li_able <= li_sub_total){
			$(this).prop("disabled", true)
		}else{
			$(".tab_more .next").prop("disabled", false)
			li_index--;
			$(".tab_navi_home").animate({scrollLeft: "-="+$(".tab_navi_home li").eq(li_index).innerWidth()},300);
		}
		
	});