7. 스킨 옵션 - 카테고리 메뉴

7. 스킨 옵션 - 카테고리 메뉴

카테고리 메뉴는 기본 메뉴의 카테고리 영역이 확장된 개념입니다. 대부분의 스킨에서 제공하는 카테고리는 단순한 링크만을 제공하고 있습니다. 즉 카테고리를 클릭하면 해당 페이지로 이동하게 됩니다. 탕비수다 이마고 스킨에서 제공하는 카테고리 기능은 썸네일 방식입니다. 각각의 카테고리에 속한 글의 대표이미지를 활용했습니다. 물론 썸네일 방식이 아닌 드롭다운 방식도 제공합니다.

설정하기

카테고리 메뉴 관련 기능은 '블로그관리 > 꾸미기 > 스킨 편집'의 스킨 옵션을 통해 쉽게 설정 가능합니다. 카테고리 메뉴에서 제공하는 스킨 옵션은 방식, 폰트 색상 그리고 배경 색상입니다.

썸네일 방식

각각의 카테고리 메뉴 근처에 마우스를 올리면 썸네일 목록이 나타나는 방식입니다. 만약 해당 카테고리에 하위 메뉴가 존재하면 왼쪽 영역에 관련 카테고리가 출력됩니다. 하위 메뉴 근처에 마우스를 올리면 관련 썸네일 목록이 나타납니다.

드롭다운 방식

드롭다운 방식은 가장 전형적인 메뉴 방식으로 하위 메뉴가 존재하면 카테고리 메뉴 근처에 마우스를 올리면 관련 하위 메뉴가 나타납니다. 물론 하위 메뉴가 없으면 아무런 변화가 없습니다.

폰트 색상

색상표에서 원하는 색상을 선택하거나 혹은 직접 HTML 색상코드를 입력하면 설정한 색상으로 카테고리 메뉴 폰트 색상이 변경됩니다.

배경 색상

색상표에서 원하는 색상을 선택하거나 혹은 직접 HTML 색상코드를 입력하면 설정한 색상으로 카테고리 메뉴 배경 색상이 변경됩니다.

카테고리 메뉴가 정의된 곳

75
76
77
78
79
/* 카테고리 메뉴 색상 */
#header.thumb .link_sub_item, #header .sub_category_list .category-item .item-content-caption .text, #header.thumb .sub_category_list .category-item .item-content-caption h2 { color: [##_var_header-submenu-font-color_##] }
#header.thumb ul.category_list > li .sub_category_list { background-color: [##_var_header-submenu-background-color_##]; border-right: 1px solid [##_var_header-submenu-font-color_##]; border-bottom: 1px solid [##_var_header-submenu-font-color_##]; border-left: 1px solid [##_var_header-submenu-font-color_##];  }
#header.dropdown .gnb .sub_category_list > li > a { color: [##_var_header-submenu-font-color_##] }
#header.dropdown .gnb .sub_category_list { background-color: [##_var_header-submenu-background-color_##] }
cs

탕비수다 이마고 스킨에서 제공하는 스킨 옵션을 이용하면 다양한 효과를 연출할 수 있습니다. CSS는 카테고리 메뉴와 관련된 내용입니다. '블로그관리 > 꾸미기 > 스킨 편집'의 [html 편집]에서 'HTML'에서 확인할 수 있습니다.

이미지 맵

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    '설명서' 카테고리의 다른 글

    글에 남긴 여러분의 의견은 0개 입니다.

    *

    *