Snippet 본문

서브탭 하위카테고리 펼짐형

등록
(등록일 : 2012/04/10    최종수정일 : 2014/02/13)
Type
PC
설명
하위 카테고리 펼침버튼있는 형태의 서브탭 메뉴
미리보기
Html
<div class="tab_comm tab_open"> <!-- 카테고리 펼침시 tab_open 클래스 추가 -->
	<div class="tab_menu">
		<h3 class="screen_out">광역시 선택 메뉴</h3>
		<ul class="list_tab">
			<li class="on"><a class="link_tab link_seoul" href="#none">서울</a> <span class="screen_out">(현재)</span></li> <!-- 카테고리 선택시 on클래스 추가 및 (현재) 마크업 추가 -->
			<li><a class="link_tab link_incheon" href="#none">인천</a></li>
			<li><a class="link_tab link_busan" href="#none">부산</a></li>
			<li><a class="link_tab link_daegu" href="#none">대구</a></li>
			<li><a class="link_tab link_gwangju" href="#none">광주</a></li>
			<li><a class="link_tab link_daejeon" href="#none">대전</a></li>
			<li><a class="link_tab link_ulsan" href="#none">울산</a></li>
			<li><a class="link_tab link_gyeonggi" href="#none">경기</a></li>
			<li><a class="link_tab link_gangwon" href="#none">강원</a></li>
			<li><a class="link_tab link_chungnam" href="#none">충남</a></li>
			<li><a class="link_tab link_chungbuk" href="#none">충북</a></li>
			<li><a class="link_tab link_gyeongnam" href="#none">경남</a></li>
			<li><a class="link_tab link_gyeongbuk" href="#none">경북</a></li>
			<li><a class="link_tab link_jeonnam" href="#none">전남</a></li>
			<li><a class="link_tab link_jeonbuk" href="#none">전북</a></li>
			<li><a class="link_tab link_jeju" href="#none">제주</a></li>
			<li><a class="link_tab link_sejong" href="#none">세종</a></li>
		</ul>
		<button class="img_sample btn_fold" type="button">카테고리 펼치기/접기</button>
	</div>
	<div class="cate_item">
		<h4 class="screen_out">서울시 지역별 카테고리</h4> <!-- 선택된 광역시 명으로 변경 -->
		<ul class="list_cate">
			<li class="on"><a class="link_cate" href="#none">강남갑</a> <span class="screen_out">(현재)</span></li> <!-- 카테고리 선택시 on클래스 추가 및 (현재) 마크업 추가 -->
			<li><a class="link_cate" href="#none">강남을</a></li>
			<li><a class="link_cate" href="#none">강동갑</a></li>
			<li><a class="link_cate" href="#none">강동을</a></li>
			<li><a class="link_cate" href="#none">강북갑</a></li>
			<li><a class="link_cate" href="#none">강북을</a></li>
			<li><a class="link_cate" href="#none">강서갑</a></li>
			<li><a class="link_cate" href="#none">강서을</a></li>
			<li><a class="link_cate" href="#none">광악갑</a></li>
			<li><a class="link_cate" href="#none">광악을</a></li>
			<li><a class="link_cate" href="#none">광진갑</a></li>
			<li><a class="link_cate" href="#none">광진을</a></li>
		</ul>
	</div>
</div>
CSS
.img_sample {background:url(/snippet/image?idx=403) no-repeat}

/* 메뉴 */
.tab_menu {position:relative;z-index:0;width:679px;height:36px;margin-top:-1px;background:url(/snippet/image?idx=403) no-repeat}
.tab_menu .btn_fold {display:inline;overflow:hidden;float:right;width:26px;height:34px;margin:1px 1px 0 0;background-position:0 -120px;text-indent:-9999px}
.tab_menu .list_tab {float:left;overflow:hidden;height:36px}
.tab_menu li {float:left}
.tab_menu .link_tab {display:block;overflow:hidden;width:38px;height:36px;background:url(/snippet/image?idx=403)  no-repeat;text-indent:-9999px}
.tab_menu .link_seoul {width:43px;margin-left:0;background-position:0 -36px}
.tab_menu .link_incheon {width:39px;background-position:-43px -36px}
.tab_menu .link_busan {background-position:-82px -36px}
.tab_menu .link_daegu {background-position:-120px -36px}
.tab_menu .link_gwangju {background-position:-158px -36px}
.tab_menu .link_daejeon {background-position:-196px -36px}
.tab_menu .link_ulsan {background-position:-234px -36px}
.tab_menu .link_gyeonggi {background-position:-272px -36px}
.tab_menu .link_gangwon {background-position:-310px -36px}
.tab_menu .link_chungnam {background-position:-348px -36px}
.tab_menu .link_chungbuk {background-position:-386px -36px}
.tab_menu .link_gyeongnam {background-position:-424px -36px}
.tab_menu .link_gyeongbuk {background-position:-462px -36px}
.tab_menu .link_jeonnam {background-position:-500px -36px}
.tab_menu .link_jeonbuk {background-position:-538px -36px}
.tab_menu .link_jeju {background-position:-576px -36px}
.tab_menu .link_sejong {background-position:-614px -36px}
.tab_menu .on .link_seoul {width:43px;background-position:0 -72px} 
.tab_menu .on .link_incheon {width:41px;background-position:-42px -72px}
.tab_menu .on .link_busan {width:40px;background-position:-82px -72px}
.tab_menu .on .link_daegu {width:40px;background-position:-121px -72px}
.tab_menu .on .link_gwangju {width:40px;background-position:-160px -72px}
.tab_menu .on .link_daejeon {width:40px;background-position:-199px -72px}
.tab_menu .on .link_ulsan {width:40px;background-position:-238px -72px}
.tab_menu .on .link_gyeonggi {width:40px;background-position:-277px -72px}
.tab_menu .on .link_gangwon {width:40px;background-position:-316px -72px}
.tab_menu .on .link_chungnam {width:40px;background-position:-355px -72px}
.tab_menu .on .link_chungbuk {width:40px;background-position:-394px -72px}
.tab_menu .on .link_gyeongnam {width:40px;background-position:-433px -72px}
.tab_menu .on .link_gyeongbuk {width:40px;background-position:-472px -72px}
.tab_menu .on .link_jeonnam {width:40px;background-position:-511px -72px}
.tab_menu .on .link_jeonbuk {width:40px;background-position:-550px -72px}
.tab_menu .on .link_jeju {width:40px;background-position:-589px -72px}
.tab_menu .on .link_sejong {width:40px;background-position:-628px -72px}
/* 카테고리 */
.tab_comm .cate_item {display:none;overflow:hidden;width:677px;border:1px solid #202230;border-top:0 none;background-color:#474b5f}
.tab_comm .cate_item .list_cate {overflow:hidden;width:665px;padding:8px 0 7px 11px;clear:both}
.tab_comm .cate_item .list_cate li {float:left;padding:0 4px 0 11px}
.tab_comm .cate_item .list_cate .link_cate {overflow:hidden;line-height:20px;color:#bebfc5;letter-spacing:-1px;white-space: nowrap;}
.tab_comm .cate_item .on {margin-left:2px;background:url(/snippet/image?idx=403) -80px -112px}
.tab_comm .cate_item .on .link_cate {font-weight:bold;color:#f0f0f0}
.tab_open .btn_fold {background-position:-40px -120px}
.tab_open .cate_item {display:block}

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