6. 스킨 옵션 - 고정 메뉴

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

고정 메뉴는 제목 영역이 일정한 위치를 벗어나면 자동으로 고정되는 메뉴입니다. 고정 메뉴는 (기본) 메뉴와 크게 다르지 않습니다. 왼쪽으로 홈링크가 있고 그 옆에 카테고리가 출력됩니다. 마지막으로 오른쪽에는 작은 기능이 모여 있는 작은 메뉴가 존재합니다. 다만 일정 위치에서 메뉴가 고정된다는 점이 다를 뿐입니다. 기본적으로 고정 메뉴는 폰트와 배경 색상을 설정할 수 있습니다.

설정하기

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

폰트 색상

색상표에서 원하는 색상을 선택하거나 혹은 직접 HTML 색상코드를 입력하면 설정한 색상으로 고정 메뉴 폰트 색상이 변경됩니다. 제목에 배경이미지를 사용하지 않는다면 원색 계통의 색상을 추천합니다. 만약 배경이미지와 함께 확장을 선택했다면 그림자 효과를 설정하면 효과를 볼 수 있습니다.

배경 색상

색상표에서 원하는 색상을 선택하거나 혹은 직접 HTML 색상코드를 입력하면 설정한 색상으로 고정 메뉴 배경 색상이 변경됩니다. 나중에 설명할 제목 배경이미지를 적용할 때 이 기능은 중요한 역활을 합니다. 즉 배경이미지를 설정하고 더불어 확장까지 선택하면 해당 영역을 투명이 아닌 특정 색상으로 선택해야 정상 출력됩니다.

고정 메뉴가 정의된 곳

68
69
70
71
72
73
74
/* 고정 메뉴 색상 */
.header-wrapper.sticky #header.thumb ul.category_list .link_item.link { color: [##_var_header-sticky-menu-font-color_##] }
.header-wrapper.sticky #header .svg-icon path{fill: [##_var_header-sticky-menu-font-color_##]}
.header-wrapper.sticky #header .home a { color: [##_var_header-sticky-menu-font-color_##] }
.header-wrapper.sticky #toggle-menu span { background-color: [##_var_header-sticky-menu-font-color_##] }
.header-wrapper.sticky { background-color: [##_var_header-sticky-menu-background-color_##] }
.header-wrapper.sticky .blogtitle a { color: [##_var_header-sticky-menu-font-color_##] }
cs

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

이미지 맵

롤랑존

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

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

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

    *

    *