Snippet 본문

카테고리형(이미지타이틀형 타입)

등록
(등록일 : 2011/12/12    최종수정일 : 2014/02/13)
Type
PC
설명
탭_카테고리 유형 (타이틀 이미지형태)
미리보기
Html
<ul class="cate_comm">
	<li class="fst">
		<a href="#none" class="link_cate">
			<span class="tit_cate tit_name1">라이프</span>
			<em class="txt_cate">(2,570 곡)</em>
		</a>
	</li>
	<li class="on"><!-- on 클래스 추가시 활성화 -->
		<a href="#none" class="link_cate">
			<span class="tit_cate tit_name2">메뉴명2</span>
			<em class="txt_cate">(1,186 곡)</em>
		</a>
	</li>
	<li>
		<a href="#none" class="link_cate">
			<span class="tit_cate tit_name3">메뉴명3</span>
			<em class="txt_cate">(186 곡)</em>
		</a>
	</li>
	<li>
		<a href="#none" class="link_cate">
			<span class="tit_cate tit_name4">메뉴명4</span>
			<em class="txt_cate">(186 곡)</em>
		</a>
	</li>
</ul>
CSS
.cate_comm {overflow:hidden;width:100%;height:22px}
.cate_comm li {float:left;width:auto;height:22px;padding-left:1px;line-height:22px;background:url(/snippet/image?idx=419) no-repeat 0 0}
.cate_comm .fst {padding-left:0;background:none}
.cate_comm .link_cate {float:left;height:22px;font-size:11px;line-height:22px;text-decoration:none;cursor:pointer;color:#888}
.cate_comm .tit_cate {overflow:hidden;float:left;height:22px;margin-left:8px;padding-right:5px;background:url(/snippet/image?idx=419) no-repeat;text-indent:-9999px}
.cate_comm .fst .tit_cate {margin-left:0}
.cate_comm .txt_cate {float:left;margin-right:8px}

.cate_comm .tit_name1 {width:40px;background-position:0 -25px}
.cate_comm .tit_name2 {width:40px;background-position:-60px -25px}
.cate_comm .tit_name3  {width:40px;background-position:-120px -25px}
.cate_comm .tit_name4 {width:40px;background-position:-180px -25px}

.cate_comm .on .link_cate {color:#666}
.cate_comm .on .tit_name1 {width:64px;background-position: 0 -60px}
.cate_comm .on .tit_name2 {width:64px;background-position:-80px -60px}
.cate_comm .on .tit_name3  {width:64px;background-position:-160px -60px}
.cate_comm .on .tit_name4 {width:64px;background-position:-240px -60px}

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