티스토리 뷰

안녕하세요~ 미스터짱 입니다.

현재 미스터짱 블로그 스킨의 상단 헤더 부분에  추가한 카테고리 기본소스 입니다.

이 소스를 활용해 아래 이미지와 같은 카테고리 메뉴를 추가했습니다 ^^





skin.html

1
<div class="category">[##_category_list_##]</div>
cs


 style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.category { line-height:40px; clear:both; overflow:hidden; }
.category a { text-decoration:none; color:#000; display:block; width:220px; text-align:center; }
.category ul, .category li { padding:0; margin:0; list-style-type:none; overflow:hidden; }
.category > ul > li > a { display:none; }
.category > ul > li > ul > li:hover { background-color:red; } /
.category > ul > li > ul > li > a { font-weight:bold; color:red; font-style:italic; }
.category > ul > li > ul > li > a:hover { color:#000; } /
.category > ul > li > ul > li > a > span.c_cnt { display:none; }
.category > ul > li > ul li:hover ul { display:block; position:absolute; }
.category > ul > li > ul > li > ul { display:none; }
.category > ul > li > ul > li > ul { border:1px solid #666; background-color:#fff; }
.category > ul > li > ul > li > ul > li:hover { background-color:#eee; }
.category > ul > li > ul > li { float:left; }
.category ul li ul li li { clear:both; }
.category > ul > li > a { display:none; }
.category > ul > li > ul > li > a > span.c_cnt { display:none; }
cs


댓글쓰기 폼
  • BlogIcon SONYLOVE 2017.01.29 22:57 신고
    오호 카테고리가 가로형태뿐 아니라 다양한 변형도 가능할거 같네요. ㅎㅎ
  • BlogIcon MrZZang 2017.01.31 22:13 신고
    다양한 형태로 변형이 가능할것 같습니다 ^^
  • 야옹이파 2018.06.20 20:56 신고
    이메일로 이거 여쭤볼려고 했는데, 여기 있었넹 +_+
  • 야옹이파 2018.06.21 21:59 신고
    skin.html 여기에 넣는 소스를 어느 위치에 넣어야 하는지 모르겠어요.
    현재 7번 스킨 사용하고 있습니다.

MrZZang