티스토리 카테고리 메뉴를 접어다 펼쳤다하는 아코디언, 드롭다운 메뉴 간단하쥬!

티스토리 스킨을 보다 세련되게 보이는 기능 중 하나가 카테고리 메뉴 정리이다. 메뉴가 작으면 상관없지만 메뉴가 늘어나고 하위 카테고리가 많아지게 되면 접었다 펼쳤다가 되는 메뉴를 원하게 된다. 반응형 블로그에서 메뉴가 접히고 펼치는 기능은 여러가지 방법으로 구현이 가능하다.

 

 

과거 홈페이지 제작할 때 드롭다운 메뉴를 적용하면서 작은 행복을 느낀 적이 있었다. 드롭다운 메뉴과 같은 기능을 하는 아코디언 메뉴는 정말로 간단하게 적용할 수 있다. 세팍타크로 라이프 블로그 메뉴에 적용된 아코디언 메뉴를 기준으로 아래와 같이 적용하면 쉽게 메뉴가 변경된다.

 

Step1. 스킨 편집 html </body> 안에<script> 아래 내용 담아</script> 넣기

$(function() {

$(".category_list").children("li").has("ul").addClass("ac-menu"),

$(".ac-menu .link_item").append().addClass("ac-toggle"),

$(".ac-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(".ac-menu").find(".view-all"))

}), $(".ac-toggle").click(function() {

var c = $(this).parent(".ac-menu");

c.children("ul").toggle(250),

c.toggleClass("expanded")

})

});

 

Step1. 스킨 편집 css 안에 넣기

.sub_category_list {display:none}
.ac-toggle i {transition:.25s}
.ac-menu.expanded .ac-toggle i{transform:scaleY(-1)}
.ac-menu .ac-toggle i {
  float: left;
  padding-right: 5px;
  pointer-events: none
}

 

추가해주면 끝. 간단하죠^^

 

 

▼ 참고 인용 포스팅

marshall-ku.tistory.com/144

티스토리 카테고리에 아코디언 메뉴 사용하기

 

[관련글]

▶ 티스토리 letter 스킨 변경 및 추천 이유

▶ 티스토리 블로그 한 줄 간격, 엔터치면 커지는 현상 바로 잡는 법

▶ 올블로그, 소장용이 되어버린 TOP100 블로그 선정 기념 후드티

올블로그, 소장용이 되어버린 TOP100 블로그 선정 기념 후드티