오늘은 사이드바 카테고리 접기 및 펼치기 기능을 구현 하면서 어떻게 적용시키는지 알아보도록 하겠습니다.
사이드바 카테고리 접기 및 펼치기 버튼 구현
티스토리에서 기본적으로 제공하는 카테고리는 보통 펼쳐진 상태입니다. 만약 본인이 사용하는 스킨에 카테고리 접기 및 펼치기 스크립트 기능이 없다면 카테고리의 서브메뉴가 길어지면 길어질수록 가독성도 그렇고 상당히 보기 지저분해지는 경향이 있습니다.
만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글 을 먼저 읽고 와주세요!
(티스토리) 스킨 편집 기초 상식
안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스
seons-dev.tistory.com
티스토리에서 제공하는 카테고리 치환자
티스토리는
ReactJS Clone project (9)
치환자 두 가지를 기본적으로 제공하고 있습니다. 이 둘의 차이점은 뭘까요? 카테고리를 접고 싶다면
ReactJS Clone project (9)
를 사용해주면 됩니다.
그럼 그냥 저대로 치환자만 바꿔주면 되는거 아니야?
아닙니다! 일단 결과 화면을 보여드리겠습니다.
왼: 카테고리 펼친 상태 / 오: 카테고리 접은 상태
제가 사용하는 스킨에서는
카테고리 펼침을 기본 제공하고 있기 때문에 스킨이 제대로 적용이 되어있지만 접은 상태는 그렇지 않습니다. 또, 보기도 깔끔하지 않죠.
이렇기 때문에 카테고리를 접고 펼치는 스크립트를 사용하는것이 가장 정확하고 깔끔합니다. 물론, 현재 사용하고 있는 스킨의 CSS 부분도 많은 부분 침해하지 않는다는 장점도 있습니다.
JavaScript 코드
위 기능을 사용하려면 아래 자바스크립트를 </body> 안쪽에 코드를 넣어줘야 합니다.
<html>
<header>
</header>
<body>
<!--여기에 추가-->
</body>
</html>위치를 알았다면 아래 코드를 저 공간에 넣어줘야 하는데, 티스토리 스킨 HTML 안에 자바스크립트를 넣으시려면 반드시 <script></script>를 감싸서 넣어줘야 한다는 점을 명심하셔야 합니다.
<script>
$(function() {
$(".category_list").children("li").has("ul").addClass("cat-sub-menu"),
$(".cat-sub-menu .link_item").append().addClass("cat-toggle"),
$(".cat-sub-menu").each(function() {
var c = $(this).children(".link_item"),
d = c.attr("href");
c.removeAttr("href"),
$(this).children("ul").prepend(), c.children("span").appendTo(c.parent(".cat-sub-menu").find(".view-all"))
}),
$(".cat-toggle").click(function() {
var c = $(this).parent(".cat-sub-menu");
c.children("ul").toggle(250), c.toggleClass("expanded")
})
});
</script>만약, 새로운 JS파일로 저장하시고 싶으시다면 <script></script> 부분은 제외하고 파일을 생성해주시면 됩니다.
위 코드에서 .category_list는 티스토리의 기본 클래스 명이고, cat-sub-menu라는 클래스를 스크립트를 통해 생성해줍니다. 그리고 toggle이 가능한 클래스 등을 새롭게 생성해 주게 됩니다.
CSS 스타일 코드
자바스크립트로 클래스들은 생성했으니, 이제 CSS를 통해 스타일을 입혀주면 됩니다.
.sub_category_list { display:none }
.cat-toggle i {
transition:.1000s ;
}
.cat-sub-menu.expanded .cat-toggle i {
transform:scaleY(-1)
}
.cat-sub-menu .cat-toggle i {
float: left;
padding-right: 5px;
cursor: pointer;
}
/*toggle 아이콘 변경*/
.cat-toggle ::after {
font-family: "따움표 안에 fontawesome 폰트명을 넣어주세요";
content: "\f107";
font-weight: bold;
cursor: pointer;
outline: none;
float: right;
margin-right: 15px;
transform: translateY(15%);
}우리가 개인적으로 수정해야할 부분은 .cat-toggle ::after 부분입니다. 사용자마다 스킨이 다르니 이 부분은 직접 수정해주셔야 합니다. font-family 에는 FontAwesome 폰트명을 넣어주면 되는데, FontAwesome에 대한 사용법을 모르신다면 구글링해서 넣어주시기 바랍니다.
FontAwesome에 대해 파악하셨으면, content 부분에 원하는 아이콘 코드명을 넣어주시고, 만약 중앙 정렬이 안되어 있어나 오른쪽에 여백을 주고 싶으시다면 margin-right 부분과 transform 부분의 코드를 적절히 수정해주세요.
해결해야 하는 사항
혹시 위 결과 화면에서 문제점을 찾으셨나요?
토글이 되서 서브메뉴가 나왔는데도 아이콘이 아래를 보고 있네요?!
네. 토글이 되었는데도 arrow 아이콘이 아래를 향하고 있습니다. 이 부분은 클래스를 통해 추가해주시면 되는데 아주 간단합니다. 스크립트에서 expanded라는 클래스를 추가했었죠? 토글이 되면 이 클래스가 생성됩니다. 이것을 활용하면 됩니다.
.cat-toggle ::after를 세분화시켜주도록 하겠습니다.
/*toggle 아이콘 변경*/
.cat-toggle ::after {
font-family: "따움표 안에 fontawesome 폰트명을 넣어주세요";
font-weight: bold;
cursor: pointer;
outline: none;
float: right;
margin-right: 15px;
transform: translateY(15%);
}
.cat-sub-menu .cat-toggle ::after {
content: "\f107"
}
.expanded .cat-toggle ::after {
content: "\f106"
}.expanded 클래스가 붙어있는 코드는 토글이 되었을 때 아이콘입니다. 이 부분을 파악하시고 아이콘을 변경해주시면 됩니다. 그리고 .cat-toggle ::after는 expanded 클래스와 공통으로 가지는 값입니다.
자바스크립트와 CSS 전체 코드
<!--카테고리 접기/펼치기-->
<script>
$(function() {
$(".category_list").children("li").has("ul").addClass("cat-sub-menu"),
$(".cat-sub-menu .link_item").append().addClass("cat-toggle"),
$(".cat-sub-menu").each(function() {
var c = $(this).children(".link_item"),
d = c.attr("href");
c.removeAttr("href"),
$(this).children("ul").prepend(), c.children("span").appendTo(c.parent(".cat-sub-menu").find(".view-all"))
}),
$(".cat-toggle").click(function() {
var c = $(this).parent(".cat-sub-menu");
c.children("ul").toggle(250), c.toggleClass("expanded")
})
});
</script>.sub_category_list { display:none }
.cat-toggle i {
transition:.1000s ;
}
.cat-sub-menu.expanded .cat-toggle i {
transform:scaleY(-1)
}
.cat-sub-menu .cat-toggle i {
float: left;
padding-right: 5px;
cursor: pointer;
}
/*toggle 아이콘 변경*/
.cat-toggle ::after {
font-family: "따움표 안에 fontawesome 폰트명을 넣어주세요";
font-weight: bold;
cursor: pointer;
outline: none;
float: right;
margin-right: 15px;
transform: translateY(15%);
}
.cat-sub-menu .cat-toggle ::after {
content: "\f107"
}
.expanded .cat-toggle ::after {
content: "\f106"
}결과 화면
카테고리 접기 및 펼치기 자바스크립트와 CSS를 모두 티스토리 스킨 편집의 HTML 부분에 넣어줬으니 결과 화면을 봐야겠죠?
성공적으로 구현했습니다!
이렇게 오늘은 티스토리 스킨에서 카테고리 접고 펼치는 스크립트 구현 방법에 대해 알아봤습니다. 티스토리를 사용하시는 모든 분들께 조금이나마 도움이 되셨기를 바랍니다!
P.S. 티스토리 스킨에 대해 지식이 부족하신 분들을 위해 쉽게 풀어봤는데 도움이 되실까 모르겠습니다.. 혹시 어려우신 부분이 있으셨다면 댓글로 남겨주세요.
읽어주셔서 감사합니다🤟
SEOGUN
GitHub 
Seogun.blog 
Email 
한국어 (기본)
English
Русский
日本語
