드롭다운 자동 생성 (by 티스토리 치환자)

장소를 찾기 가장 쉬운 방법인 지도를 보는 것 입니다. 드롭다운은 블로그 지리를 소개할 수 있는 지도같은 역할을 합니다. 하지만 웹 코딩을 처음 접하신 분들은 드롭다운을 만들기 어렵고, 카테고리에 변동사항이 있을 때마다 HTML를 변경하는 일은 번거로운 일이 아닐수 없습니다.

따라서, 티스토리 치환자을 기반으로 수정을 최소화하는 자동생성 드롭다운을 단, 두 번의 복사붙여넣기로 구현해 보겠습니다.

1. 드롭다운 자동 생성 - HTML 수정

<div id="dkHead" role="banner" class="area_head"> 를 찾아 바로 다음 줄에 아래의 코드를 붙여넣습니다.

<div class='head_dropdown'> 전체 글 (116) 
   💻 Information (47) 
   Electicity (23) 
 Computer (24) 


 Tip & Review (53) 
   팁 (34) 
 제품 & 영상 (19) 


 나 (15) 
   내_생각 (7) 
 일기 (4) 
 쓰는 중🍛 (4) 


 🏋️‍♂️ Honing My Skills (1) 
   Communication (0) 
 Investing (1) 





</div>

2. 드롭다운 자동 생성 - CSS 수정

.area_menu 를 찾아 바로 윗 줄에 아래의 코드를 붙여넣습니다.

.head_dropdown{display:block;position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;width:500px;font-weight:bold;z-index: 41;}/*상단의 카테고리 개수 넓이 만큼 width:500px 값을 변경하세요.*/
.head_dropdown a {text-decoration:none;color:#666}
.head_dropdown .link_tit{display:none}
.head_dropdown .c_cnt{display:none}
.head_dropdown .tt_category {text-align:center;}
.head_dropdown .category_list li {display:inline-block;position:relative;}
.head_dropdown .category_list>li:hover>a {color:#3db39e;border-bottom:7px solid #3db39e}/*마우스를 올렸을때 색상*/
.head_dropdown .category_list li:hover .sub_category_list {top:80px;opacity:1}/*헤드의 높이 변경시 '80px'값들을 변경하면 됩니다. */
.head_dropdown .link_item {display:block;box-sizing:border-box;width:120px;height:80px;line-height:80px;font-size:18px;}
.head_dropdown .sub_category_list {position:absolute;top:-300px;opacity:0;}
.head_dropdown .sub_category_list li {position:relative;}
.head_dropdown .link_sub_item {display:block;width:120px;height:35px;line-height:35px;background-color:rgba(255,255,255,.95);border-bottom:1px solid #ebebeb;}
.head_dropdown .link_sub_item:hover{background:#3db39e;color:#fff;}/*마우스를 올렸을때 색상*/

추가로 모바일 기기에서는 보이지 않게 하기 위해 @media only screen and (max-width:820px) 를 찾아 바로 윗줄에 아래의 코드를 붙여넣습니다.

@media only screen and (max-width:1200px) {.head_dropdown{display:none}}

3. 티스토리 카테고리 치환자 내부소스

티스토리 치환자 내부코드는 같으니 다른 스킨에서도 적용 가능합니다. 다만, 반응형스킨 #1에서 가장 어울리게 동작하며, 카테고리를 변경해도 자동적으로 맞춤 동작합니다. 스킨 백업 후 진행하시는 것을 추천드리고, 코드 수정을 원하시면 다음 글을 참조하세요.

http://gigawatt.tistory.com/49

4. 자동 드롭다운 - 코드 텍스트 파일

위에 나온 코드를 모두 담은 txt파일 입니다.

헤드_드롭다운 head_dropdown.txt