티스토리 반응형 #1 카테고리 펼치기

▶티스토리 반응형 #1 카테고리 펼치기 

반응형 스킨 #1은 양쪽이 생각보다 허전한 면이 있어서

오른쪽 카테고리를 펼치면 어쩔까 고민을 많이 해봤습니다.

당연히 스킨편집에서 수정전 소스부분에서 수정후 소스로변경하면 되는데 간단하게 on 하나만 더 넣으면된다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102

<!-- 수정전 --> <div role="navigation" class="area_navi">        <button type="button" class="btn_cate">펼쳐보세요<span class="ico_skin ico_cate"></span></button>        <div class="list_cate">               <ul class="tt_category"><li class=""><a href="/category" class="link_tit"> 분류 전체보기 <span class="c_cnt">(813)</span> </a>   <ul class="category_list"><li class=""><a href="/category/%ED%95%98%EB%9E%91%EC%9D%B4%EB%9E%91" class="link_item"> 하랑이랑 <span class="c_cnt">(38)</span> </a>   <ul class="sub_category_list"><li class=""><a href="/category/%ED%95%98%EB%9E%91%EC%9D%B4%EB%9E%91/2015%EB%85%84" class="link_sub_item"> 2015년 <span class="c_cnt">(8)</span> </a></li> <li class=""><a href="/category/%ED%95%98%EB%9E%91%EC%9D%B4%EB%9E%91/2018%EB%85%84" class="link_sub_item"> 2018년 <span class="c_cnt">(5)</span> </a></li> <li class=""><a href="/category/%ED%95%98%EB%9E%91%EC%9D%B4%EB%9E%91/2019%EB%85%84" class="link_sub_item"> 2019년 <span class="c_cnt">(14)</span> </a></li> <li class=""><a href="/category/%ED%95%98%EB%9E%91%EC%9D%B4%EB%9E%91/%EB%9E%91%EC%8A%A4%EB%9E%91%20%EA%B7%B8%EB%A6%BC" class="link_sub_item"> 랑스랑 그림 <span class="c_cnt">(11)</span> </a></li> </ul> </li> <li class=""><a href="/category/%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83" class="link_item"> 이것저것 <span class="c_cnt">(716)</span> </a>   <ul class="sub_category_list"><li class=""><a href="/category/%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83/%EB%A7%90%EC%94%80%EB%AC%B5%EC%83%81" class="link_sub_item"> 말씀묵상 <span class="c_cnt">(673)</span> </a></li> <li class=""><a href="/category/%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC" class="link_sub_item"> 티스토리 <span class="c_cnt">(14)</span> </a></li> <li class=""><a href="/category/%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83/%EC%BB%B4%ED%93%A8%ED%84%B0-%EC%9D%B8%ED%84%B0%EB%84%B7" class="link_sub_item"> 컴퓨터-인터넷 <span class="c_cnt">(15)</span> </a></li> <li class=""><a href="/category/%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83/%EB%84%A4%EC%9D%B4%EB%B2%84TV" class="link_sub_item"> 네이버TV <span class="c_cnt">(2)</span> </a></li> <li class=""><a href="/category/%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83/%EC%9C%A0%ED%8A%9C%EB%B8%8C" class="link_sub_item"> 유튜브 <span class="c_cnt">(7)</span> </a></li> </ul> </li> <li class=""><a href="/category/SERVER" class="link_item"> SERVER <span class="c_cnt">(10)</span> </a>   <ul class="sub_category_list"><li class=""><a href="/category/SERVER/LINUX" class="link_sub_item"> LINUX <span class="c_cnt">(6)</span> </a></li> <li class=""><a href="/category/SERVER/Windows" class="link_sub_item"> Windows <span class="c_cnt">(4)</span> </a></li> <li class=""><a href="/category/SERVER/Oracle" class="link_sub_item"> Oracle <span class="c_cnt">(0)</span> </a></li> </ul> </li> <li class=""><a href="/category/LANGUAGE" class="link_item"> LANGUAGE <span class="c_cnt">(25)</span> </a>   <ul class="sub_category_list"><li class=""><a href="/category/LANGUAGE/JAVA" class="link_sub_item"> JAVA <span class="c_cnt">(1)</span> </a></li> <li class=""><a href="/category/LANGUAGE/Jquery" class="link_sub_item"> Jquery <span class="c_cnt">(2)</span> </a></li> <li class=""><a href="/category/LANGUAGE/Android" class="link_sub_item"> Android <span class="c_cnt">(8)</span> </a></li> <li class=""><a href="/category/LANGUAGE/Java%20Script" class="link_sub_item"> Java Script <span class="c_cnt">(9)</span> </a></li> <li class=""><a href="/category/LANGUAGE/C%23" class="link_sub_item"> C# <span class="c_cnt">(4)</span> </a></li> <li class=""><a href="/category/LANGUAGE/Python" class="link_sub_item"> Python <span class="c_cnt">(1)</span> </a></li> </ul> </li> <li class=""><a href="/category/DBMS" class="link_item"> DBMS <span class="c_cnt">(14)</span> </a>   <ul class="sub_category_list"><li class=""><a href="/category/DBMS/MS-SQL" class="link_sub_item"> MS-SQL <span class="c_cnt">(12)</span> </a></li> <li class=""><a href="/category/DBMS/MY-SQL" class="link_sub_item"> MY-SQL <span class="c_cnt">(1)</span> </a></li> </ul> </li> <li class=""><a href="/category/TOOL" class="link_item"> TOOL <span class="c_cnt">(7)</span> </a></li> </ul> </li> </ul>                <ul class="menu_profile">                 <li><a href="https://rangstv.tistory.com/guestbook">방명록</a></li>              </ul>       </div> </div>     <!-- 수정후 --> <div role="navigation" class="area_navi on">        <button type="button" class="btn_cate">펼쳐보세요<span class="ico_skin ico_cate"></span></button>        <div class="list_cate">               <ul class="tt_category"><li class=""><a href="/category" class="link_tit"> 분류 전체보기 <span class="c_cnt">(813)</span> </a>   <ul class="category_list"><li class=""><a href="/category/%ED%95%98%EB%9E%91%EC%9D%B4%EB%9E%91" class="link_item"> 하랑이랑 <span class="c_cnt">(38)</span> </a>   <ul class="sub_category_list"><li class=""><a href="/category/%ED%95%98%EB%9E%91%EC%9D%B4%EB%9E%91/2015%EB%85%84" class="link_sub_item"> 2015년 <span class="c_cnt">(8)</span> </a></li> <li class=""><a href="/category/%ED%95%98%EB%9E%91%EC%9D%B4%EB%9E%91/2018%EB%85%84" class="link_sub_item"> 2018년 <span class="c_cnt">(5)</span> </a></li> <li class=""><a href="/category/%ED%95%98%EB%9E%91%EC%9D%B4%EB%9E%91/2019%EB%85%84" class="link_sub_item"> 2019년 <span class="c_cnt">(14)</span> </a></li> <li class=""><a href="/category/%ED%95%98%EB%9E%91%EC%9D%B4%EB%9E%91/%EB%9E%91%EC%8A%A4%EB%9E%91%20%EA%B7%B8%EB%A6%BC" class="link_sub_item"> 랑스랑 그림 <span class="c_cnt">(11)</span> </a></li> </ul> </li> <li class=""><a href="/category/%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83" class="link_item"> 이것저것 <span class="c_cnt">(716)</span> </a>   <ul class="sub_category_list"><li class=""><a href="/category/%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83/%EB%A7%90%EC%94%80%EB%AC%B5%EC%83%81" class="link_sub_item"> 말씀묵상 <span class="c_cnt">(673)</span> </a></li> <li class=""><a href="/category/%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC" class="link_sub_item"> 티스토리 <span class="c_cnt">(14)</span> </a></li> <li class=""><a href="/category/%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83/%EC%BB%B4%ED%93%A8%ED%84%B0-%EC%9D%B8%ED%84%B0%EB%84%B7" class="link_sub_item"> 컴퓨터-인터넷 <span class="c_cnt">(15)</span> </a></li> <li class=""><a href="/category/%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83/%EB%84%A4%EC%9D%B4%EB%B2%84TV" class="link_sub_item"> 네이버TV <span class="c_cnt">(2)</span> </a></li> <li class=""><a href="/category/%EC%9D%B4%EA%B2%83%EC%A0%80%EA%B2%83/%EC%9C%A0%ED%8A%9C%EB%B8%8C" class="link_sub_item"> 유튜브 <span class="c_cnt">(7)</span> </a></li> </ul> </li> <li class=""><a href="/category/SERVER" class="link_item"> SERVER <span class="c_cnt">(10)</span> </a>   <ul class="sub_category_list"><li class=""><a href="/category/SERVER/LINUX" class="link_sub_item"> LINUX <span class="c_cnt">(6)</span> </a></li> <li class=""><a href="/category/SERVER/Windows" class="link_sub_item"> Windows <span class="c_cnt">(4)</span> </a></li> <li class=""><a href="/category/SERVER/Oracle" class="link_sub_item"> Oracle <span class="c_cnt">(0)</span> </a></li> </ul> </li> <li class=""><a href="/category/LANGUAGE" class="link_item"> LANGUAGE <span class="c_cnt">(25)</span> </a>   <ul class="sub_category_list"><li class=""><a href="/category/LANGUAGE/JAVA" class="link_sub_item"> JAVA <span class="c_cnt">(1)</span> </a></li> <li class=""><a href="/category/LANGUAGE/Jquery" class="link_sub_item"> Jquery <span class="c_cnt">(2)</span> </a></li> <li class=""><a href="/category/LANGUAGE/Android" class="link_sub_item"> Android <span class="c_cnt">(8)</span> </a></li> <li class=""><a href="/category/LANGUAGE/Java%20Script" class="link_sub_item"> Java Script <span class="c_cnt">(9)</span> </a></li> <li class=""><a href="/category/LANGUAGE/C%23" class="link_sub_item"> C# <span class="c_cnt">(4)</span> </a></li> <li class=""><a href="/category/LANGUAGE/Python" class="link_sub_item"> Python <span class="c_cnt">(1)</span> </a></li> </ul> </li> <li class=""><a href="/category/DBMS" class="link_item"> DBMS <span class="c_cnt">(14)</span> </a>   <ul class="sub_category_list"><li class=""><a href="/category/DBMS/MS-SQL" class="link_sub_item"> MS-SQL <span class="c_cnt">(12)</span> </a></li> <li class=""><a href="/category/DBMS/MY-SQL" class="link_sub_item"> MY-SQL <span class="c_cnt">(1)</span> </a></li> </ul> </li> <li class=""><a href="/category/TOOL" class="link_item"> TOOL <span class="c_cnt">(7)</span> </a></li> </ul> </li> </ul>                <ul class="menu_profile">                 <li><a href="https://rangstv.tistory.com/guestbook">방명록</a></li>              </ul>       </div> </div>