반응형
치환자로 HTML 구조 작성
이미 카테고리가 작성 돼있는경우 생략하면 된다.skin.html에서 티스토리 치환자 ##_category_list_##를 이용해 HTML구조를 작성한다.
https://tistory.github.io/document-tistory-skin/sidebar/category.html
JS파일에 스크립트작성(Jquery)
스킨파일에 임포트
<head>안에 <script src="./images/common.js"></script> 추가하기
dropdown코드작성
- 먼저
sub_category_list이름의 2차 카테고리를 가진 1차 카테고리에has-ch클래스를 추가하고 - 2차카테고리를 가진 1차카테고리의 링크이동을 막고(e.preventDefault)
active클래스가 없으면active클래스를 추가하고 2차 카테고리를 slideDown으로 보여준다.active클래스가 있으면active클래스를 제거하고 2차 카테고리를 slideUp으로 숨겨준다.
$(document).ready(function(){
// has-ch
$(".sub_category_list").each(function(index, item){
$(this).siblings(".link_item").addClass("has-ch");
});
// dropdown
$(".category .has-ch").on("click", function (e) {
var element = $(this);
console.log("child 있음");
e.preventDefault();
if (!element.hasClass("active")) {
element.addClass("active");
element.siblings(".sub_category_list").slideDown(200);
} else {
element.removeClass("active");
element.siblings(".sub_category_list").slideUp(200);
}
});
});스킨편집에서 JS파일추가
관리 > 스킨편집 > HTML 수정 > 파일 업로드 > 추가
URL 경로는 티스토리ID.tistory.com/manage/design/skin/edit#/
로컬에서 작성한 common.js 파일을 업로드하면 티스토리스킨내에서 자동으로 images폴더안에 넣어진다.
CSS 작성
has-ch 클래스 스타일(하위 메뉴가 있는 1차 메뉴)
관리 > 스킨편집 > HTML 수정 > CSS에서 다음코드를 아무데나 추가한다.
- remixicon을 추가하고
active클래스가 있을때 180도 회전하는 애니메이션 추가
@import url('https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css');
.link_item.has-ch {
position: relative;
}
.link_item.has-ch::after {
content: "\ea4e";
right:24px;
top:50%;
transform: translateY(-50%);
font-size: 14px;
transition: .3s ease-in-out;
position: absolute;
font-family: remixicon!important;
font-style: normal;
-webkit-font-smoothing: antialiased;
}
.link_item.has-ch.active::after {
transform: translateY(-50%) rotate(-180deg);
}2차 메뉴 숨김
CSS에 다음을 마저 추가한다.display: none을 해주어야 2차메뉴를 숨겨주고 클릭했을때 보여줄수 있다.
.sub_category_list {display: none;}완성
적용 전에는 2차메뉴가 다 펼쳐져서 메뉴가 길었는데
적용 후 한층 정돈된 느낌이 든다.
반응형
'Design > Others' 카테고리의 다른 글
| [티스토리 스킨 만들기] 게시판 리스트에 기본썸네일 지정 (0) | 2024.06.13 |
|---|---|
| 어도비 XD 설치된 폰트 활성화 안될때 해결방법 (0) | 2024.01.23 |
| [highlight.js] 티스토리 코드블럭 색, 라인넘버 넣기 (0) | 2023.08.25 |
