Snippet 본문

서브탭 이전,다음 버튼형

등록
(등록일 : 2013/01/09    최종수정일 : 2013/12/20)
Type
PC
설명
이전, 다음 버튼이 있는 형태의 서브 탭 메뉴
미리보기
Html
<div class="tab_comm">
	<div class="wrap_tab">
		<ul class="list_tab">
			<li><a href="#none" class="link_tab">도착</a></li>
			<li class="on"><a href="#none" class="link_tab">출발</a></li>
		</ul>
	</div>
	<div class="wrap_subtab">
		<ul class="list_subtab">
			<li class="on"><a href="#none" class="link_subtab">10.1 금</a></li>
			<li><a href="#none" class="link_subtab link_saturday">10.2 토</a></li>
			<li><a href="#none" class="link_subtab link_sunday">10.3 일</a></li>
			<li><a href="#none" class="link_subtab">10.4 월</a></li>
			<li><a href="#none" class="link_subtab">10.5 화</a></li>
			<li><a href="#none" class="link_subtab">10.6 수</a></li>
			<li><a href="#none" class="link_subtab">10.7 목</a></li>
		</ul>
		<button type="button" class="btn_subtab btn_prev"><!-- 활성화시 'prev_on' 추가 -->
			<span class="img_sample ico_prev">이전</span>
		</button>
		<button type="button" class="btn_subtab btn_next next_on"><!-- 활성화시 'next_on' 추가 -->
			<span class="img_sample ico_next">다음</span>
		</button>
	</div>
</div>
CSS
.img_sample {display:block;overflow:hidden;background:url(/snippet/image?idx=231) no-repeat;text-indent:-9999px}

.wrap_tab {width:600px;height:29px;padding-top:20px;border-bottom:1px solid #b4b4b4;font-size:12px;font-family:'굴림',gulim,sans-serif}
.wrap_tab .list_tab {float:left;border-left:1px solid #dadcdf}
.wrap_tab .list_tab li {float:left;margin-left:-1px;border:1px solid #dadcdf;border-bottom:0 none;background-color:#f8f8f8}
.wrap_tab .list_tab .link_tab {overflow:hidden;float:left;height:14px;padding:7px 18px 7px 19px;font-size:12px;line-height:14px;color:#222;text-align:center;text-decoration:none}
.wrap_tab .list_tab .on {position:relative;margin:0 0 -1px -1px;padding-bottom:0;border:1px solid #71788a;background-color:#767f90}
.wrap_tab .list_tab .on .link_tab {padding:7px 15px 7px 16px;font-weight:bold;color:#fff;letter-spacing:-1px}

.wrap_subtab {overflow:hidden;position:relative;width:600px;height:31px;border-bottom:1px solid #dedede;font-size:12px;font-family:'굴림',gulim,sans-serif}
.wrap_subtab .list_subtab {overflow:hidden;padding:0 24px}
.wrap_subtab li {float:left;width:76px;height:32px;line-height:32px;text-align:center}
.wrap_subtab .link_subtab {color:#444}
.wrap_subtab .link_saturday {color:#3a8fdd}
.wrap_subtab .link_sunday {color:#e85947}
.wrap_subtab .on {width:96px}
.wrap_subtab .on .link_subtab {padding-left:9px;font-weight:bold;background:url(/snippet/image?idx=231) no-repeat 0 2px;color:#000}
.wrap_subtab .btn_subtab {overflow:hidden;position:absolute;top:-1px;width:25px;height:33px;border:1px solid #dedede;font-size:0}
.wrap_subtab .btn_subtab .img_sample {display:block;width:6px;height:9px;margin:0 auto}
.wrap_subtab .btn_prev {left:0}
.wrap_subtab .btn_prev .ico_prev {background-position:0 -60px}
.wrap_subtab .prev_on .ico_prev {background-position:0 -100px}
.wrap_subtab .btn_next {right:0}
.wrap_subtab .btn_next .ico_next {background-position:0 -80px}
.wrap_subtab .next_on .ico_next {background-position:0 -120px}

안내 : 해당 Snippet을 사용하기 위해서는 Daum에서 사용하는 reset.css(global classname포함)를 사용 하셔야 합니다.
※ [ CSS Convention ] 바로가기