티스토리 뷰

안녕하세요~ 미스터짱 입니다.

이번에는 티스토리의 카테고리에서 서브메뉴를 접었다 펼치는 방법에 대해서 알아보겠습니다.


초보분들을 위한 방법이니 고수 분들에게는 필요 없어 보이네요 ^^;;


미스터짱 블로그를 보시면 현재 적용되어있는 가로 슬라이드 메뉴에 티스토리 카테고리 부분을 보시면

아래 사진과 같이 나타납니다. 


모든 카테고리가 펼쳐저 있습니다.




이렇게 사용들 하셔도 이상없이 잘사용을 할수 있지만 

조금더 심플해 보일수 있도록 아래 표시되어있는 서브메뉴를 접었다 펼칠수 있도록 해보겠습니다.





먼저 카테고리 구조를 한번 알아 보겠습니다.

아래는 [샆샾_category_list_샾샾] 치환자를 이용할 경우 생성되는 구조입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul class="tt_category">
    <li>
    <a class="link_tit" href="/category">분류 전체보기 <span class="c_cnt">(글갯수)</span></a>
    <ul class="category_list">
        <li>
        <a class="link_item" href="...">카테고리명 <span class="c_cnt">(글갯수)</span></a>
        <ul class="sub_category_list">
            <li>
            <a class="link_sub_item" href="...">서브 카테고리명 <span class="c_cnt">(글갯수)</span></a>
            </li>
        </ul>
        </li>
    </ul>
    </li>
</ul>
cs


위 구조를 활용해야 티스토리 카테고리 서브메뉴 접었다 펼치는 방법을 완성할수 있습니다.

카테고리 구조를 참고하시구요 



이제부터 본론으로 들어가겠습니다.


[js]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 /**
  * category_slideToggle Tistory Skin Fix by JY-SKIN 
  * (http://mrjjang.tistory.com/), author MrZZang
  */ 
 
$('.tt_category ul.sub_category_list').prev().after('<input type="button" id="cate_sub" onclick="cate_sub_click();" value="+" />');    //sub_category_list 의 앞에있는 link_item의 끝에 value="+" 인 버튼을 생성한다
 
$(".tt_category #cate_sub").click(function () {  // 위에서 생성된 id="cate_sub" 인 버튼을 클릭할때
 
    $(this).next("ul.sub_category_list").slideToggle();   // 클릭된 버튼 다음에 있는 sub_category_list 를 접기&펼치기 를 한다
 
});
cs


[html]

[샆샾_category_list_샾샾] 치환자를 이용한 구조와 같습니다.


<style>

1
2
.sub_category_list { display: none; } 
.category_navbar input#cate_sub { float: right; font-weight: bold; font-size: 16px !important; border: 0px; background-color: #fff; padding-left: 10px; }  /* 생성된 id="cate_sub"인 버튼 위치, 폰트 지정관련 */
cs


잘적용 하셨다면 아래 동영상처럼 작동되실꺼에요^^

기타 디자인은 각자 취향에 맞게 하시면 되겠습니다.



허접한 내용이지만 찾아보니 관련정보가 없더라구요. 

그래서 고수분들의 태클이 걸릴수 있지만 초보분들께 조금이나마 도움되시라고 정리해 올려봅니다 ^^


이상 미스터짱의 "티스토리 카테고리 서브메뉴 접었다 펼치는 방법" 이었습니다~~ 

MrZZang

최근에 올라온 글
최근에 달린 댓글
방문자수
  • Total :
  • Today :
  • Yesterday :

미스터짱의 일상,취미가 있는곳...