Whatever 스킨 맞춤 가이드: 티스토리 카테고리 메뉴, 서브 메뉴로 더 깔끔하게! + 코드 공유

영동2호 2025. 3. 20. 10:07

내 블로그 탐색, 방문자에게 더 편리하게 제공하고 싶으신가요?

티스토리 Whatever 스킨 사용자라면 주목! 블로그 카테고리 메뉴를 깔끔하게 정리하고, 사용자 경험(UX)까지 향상시키는 "서브 메뉴 추가" 방법을 소개합니다. 간단한 HTML/CSS 수정으로 블로그 탐색을 더욱 편리하게 만들고, SEO 효과까지 높여 보세요!

코드 복사하기

1. 아래 코드를 복사하세요.

/* whatever_nav ------------------------------------------------ */ #gnb .tt_category li a.link_tit {display: none;} #gnb ul li {font-size: 0.875rem;padding: 26px 10px;} #gnb .sub_category_list {display: none; position: absolute; z-index: 999; min-width: 120px; background-color: #ffffff; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); font-size: .875rem;} #gnb .category_list li:hover .sub_category_list {display: block;} #gnb .sub_category_list li {float: none; padding: 0;} #gnb .sub_category_list a:hover:after {display: none;} #gnb .sub_category_list li a {text-align: left; padding: 6px 16px; line-height: 18px;} #gnb > ul {display: inline-block;} #gnb>ul.tt_category>li {padding: 0; border: 0;} .layout-float #gnb > ul {display: block;} .layout-float #gnb ul li {text-align: left; font-size: 1rem; border-bottom: 0;} .layout-float #gnb .sub_category_list {display: block; position: static; min-width: 100%; margin: 2px 0 13px 15px; border-left: 3px solid #f1f1f1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; font-size: .875rem;} .layout-float #gnb .sub_category_list li a {padding: 6px 0px 6px 16px;} .layout-float #gnb ul li a:hover:after {display: none;} .color-dark #gnb .sub_category_list {background-color: #141414;box-shadow: 0px 8px 16px 0px rgba(255, 255, 255, 0.2);} .layout-float.color-dark #gnb .sub_category_list {box-shadow:none;} @media screen and (max-width: 928px) { #gnb>ul {display: block;} #gnb {overflow-y: auto; height: 100%;} #gnb ul {overflow: hidden; height: auto;} #gnb ul li {padding: 0; border-top: 0;} #gnb ul li a{padding: 8px 30px 8px;} #gnb .sub_category_list {display: block; position: static; min-width: 100%; margin: 2px 0 13px 40px; border-left: 3px solid #f1f1f1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; font-size: .875rem;} .color-dark #gnb .sub_category_list {box-shadow: none;} } @media screen and (max-width: 767px) { .layout-float #gnb ul li {border-top: 0;} .layout-float #gnb .sub_category_list {margin: 2px 0 13px 45px;} .layout-float #gnb ul li a {padding: 8px 30px 8px;} }

HTML 코드 수정: 서브 메뉴 뼈대 만들기

스킨 편집창 열기: 티스토리 관리자 페이지 -> 꾸미기 -> 스킨 편집 -> CSS으로 이동합니다.

편집창 가장 아래에 코드를 붙여 주세요.