반응형
치환자로 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차메뉴가 다 펼쳐져서 메뉴가 길었는데
적용 후 한층 정돈된 느낌이 든다.
반응형
'Frontend > UIUX' 카테고리의 다른 글
| [티스토리 스킨 만들기] 게시판 리스트에 기본썸네일 지정 (1) | 2024.06.13 |
|---|---|
| 어도비 XD 설치된 폰트 활성화 안될때 해결방법 (0) | 2024.01.23 |
| [highlight.js] 티스토리 코드블럭 색, 라인넘버 넣기 (0) | 2023.08.25 |
