[티스토리] - [꾸미기] - [스킨편집] - [html 편집] 으로 들어간후
HTML쪽에 <body> 부분에 아래의 소스를 추가한다.
해당 소스는 펑션으로 카테고리를 열고/접게 해준다.
<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>
기능을 구현했으니 보기 좋게 바꿔보자.
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;
}
.cat-toggle ::after {
font-family: "아래의 설명을 참고";
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"
}
font-family의 경우 fontawesome 에서 필요한 아이콘을 불러올 수 있다. 구글링해서 검색해 보아도되고
무료버전을 사용하는 경우 "Font Awesome 5 Free" 으로 넣어 주면 된다 (무료&버전5 기준)
content의 경우 자기가 원하는 아이콘을 폰트어썸에서 찾아서 바꿔도 된다.
혹시 해당 경우를 적용했는데도 반영되지 않는다면 아래의 방법을 참고하자.
스킨을 가져와서 적용하다 보니 기존에 <head>적용되어있던 부분이 삭제되었기 때문이다.
필자는 body부분인줄 알고 한참을 헤맸다..
<head>부분에 아래와 같은 부분이 없다면 넣어주자.
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>티스토리 블로그를 만들게 되면 기본으로 있는 부분으로 버전의 경우 새로 블로그를 만들어서 해당 버전을 가져와도 된다.