티스토리 블로그에 드롭다운 메뉴 만드는 방법

깃허브(GitHub)에 올라온 James Johnson의 짧은 코드를 사용해 간단하게 티스토리 블로그에 드롭다운 메뉴를 넣을 수 있다. 

1. HTML 코드 수정

티스토리 블로그 관리에서 스킨 편집 > html 편집 > html로 들어가서

블로그메뉴(

• 일상기록부
• 현대문학테마
• 여행노트
• 열린노트
• 키워드
• 방명록
• 면책공고

) 부분 코드를 다음 코드로 변경한다.

블로그메뉴가 없는 스킨이라면 적당한 자리(<header> 근처)에 새로 넣으면 된다. 

<nav class="jmenu">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="jm-dropdown">
      <a href="#">Categories</a>
      <ul>
        <li><a href="#">Apples</a></li>
        <li><a href="#">Bananas and Pears</a></li>
        <li><a href="#">Oranges</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

예컨대 북클럽 스킨이라면 다음 코드를 지우고 위 코드로 대체하면 된다.

<div class="gnbmenu">
	<nav id="gnb">

  
일상기록부
  
현대문학테마
  
여행노트
  
열린노트
  
키워드
  
방명록
  
면책공고
</nav>
</div>

2. 스타일시트 수정

[방법 1] CSS를 수정해서 쓰고 싶은 경우

티스토리 블로그 관리에서 스킨 편집 > html 편집 > css에 다음 코드를 직접 추가한다.

테스트해 가면서 CSS를 바로바로 수정할 수 있어 편하다.

.jmenu {background-color:#262626; box-sizing:border-box; line-height:1; text-align:center; font-size:0.95em;}
input .jm-menu-btn,input[type=checkbox]
.jm-menu-btn~.jm-collapse {display:none;}
nput[type=checkbox]:checked .jm-menu-btn~.jm-collapse {display:block;}
label .jm-menu-btn {color:#959595; cursor:pointer; display:block; padding:16px 32px;}
label .jm-menu-btn:hover {color:#fff;}
.jm-collapse {border-top:1px #959595 solid;}
.jmenu li, .jmenu ul {list-style:none; margin:0; padding:0;}
.jmenu a {color:#959595; display:inline-block; padding:16px 32px; text-decoration:none;}
.jm-dropdown:hover a, .jmenu a:hover {color:#fff;}
.jmenu ul ul {display:none;}
.jm-dropdown:hover ul {display:block;}
.jm-dropdown ul {background:#fff; padding:0;}
.jm-dropdown ul a, .jm-dropdown:hover ul a {color:#0072bc;}
.jm-dropdown ul a:hover, .jm-dropdown:hover ul a:hover {color:#000;}
.jm-dropdown ul ul {border-bottom:1px #ccc solid; border-top:1px #ccc solid; box-shadow:none; margin-bottom:16px; max-width:100%; position:relative;}
.jm-icon-dropdown {border:solid #959595; border-width:0 2px 2px 0; display:inline-block; margin:0 0 3px 8px; padding:3px; transform:rotate(45deg);}li:hover 
.jm-icon-dropdown {border-color:#fff;}
.jm-icon-menu::before {content:'\2630';}

@media (min-width:768px) {
.jmenu li {display:inline-block;}
.jmenu a {padding:16px;}
.jm-dropdown {position:relative;}
.jm-dropdown li a {display:block; padding:8px 16px; white-space:nowrap;}
.jm-dropdown ul {box-shadow:1px 1px 3px 0 rgba(0,0,0,.5); padding:8px 0; position:absolute; min-width:100%;}
input .jm-menu-btn,label .jm-menu-btn {display:none;}
.jm-collapse,input[type=checkbox]
.jm-menu-btn~.jm-collapse {display:block;}
}

[방법 2] CSS 코드 길이를 줄이는 방식

CSS가 너무 길어지는 게 싫다면

①

이 페이지에서 코드 파일(ZIP)을 다운로드한 후 압축을 풀고

코드 파일은 초록색 'Code' 버튼을 누르면 나오는 맨 아래 'Download ZIP'을 클릭하면 다운로드할 수 있다.

②

압축파일 중 jmenu.min.css 파일을 티스토리 블로그 관리에서 스킨 편집 > html 편집 > 파일업로드에 업로드한 후

②

아래 코드를 HTML의 </head> 앞에 추가하면 된다.

<link rel="stylesheet" href="./images/jmenu.min.css">

---

 

끝. 수동 방식으로 드롭다운 메뉴가 완성된다.