티스토리에 반응형 CSS 메뉴 추가하는 방법 - JMenu

2020. 1. 28. 01:47 | 댓글 22

이 티스토리 블로그에는 현재 Book Club 스킨에서 제공하는 메뉴 대신 반응형 CSS 메뉴 라이브러리인 JMenu가 사용되고 있습니다. 

티스토리에 반응형 CSS 메뉴 (드롭다운 메뉴) 추가하는 방법 - JMenu

구글을 검색해보면 많은 메뉴 라이브러리를 찾을 수 있을 것입니다. 저는 일부러 CSS만으로 구현된 CSS 라이브러리를 선택했습니다. JMenu를 활용하여 메뉴를 추가하면 위의 그림처럼 티스토리에서 메뉴 항목을 사용자가 원하는 대로 추가할 수 있고 드롭다운도 가능합니다.

다른 방법으로 "HTML과 CSS로 심플한 메뉴를 추가했습니다" 글에서 소개하는 사이트를 활용하여 메뉴를 추가할 수도 있습니다. 

 

jamesjohnson280/jmenu

A Responsive CSS Menu. Contribute to jamesjohnson280/jmenu development by creating an account on GitHub.

github.com

다음과 같은 단계에 따라 JMenu를 티스토리에 응용할 수 있습니다.

1. 먼저 위의 사이트에서 jmenu.min.css 파일을 다운로드합니다. css 파일을 다운로드하려면 Clone or download 버튼을 클릭하고 Download ZIP을 선택합니다.

다운로드한 ZIP 파일의 압축을 해제하면 jmenu.min.css 파일이 있는 것을 확인할 수 있습니다.

압축 파일은 반디집이나 7-zip 같은 무료 압축 프로그램을 사용하여 압축을 해제할 수 있습니다.

2. CSS 파일을 다운로드했다면 이제 파일을 티스토리에 업로드해야 합니다.

티스토리에 로그인한 후에 꾸미기 > 스킨 편집 > HTML 편집을 클릭합니다.

 그러면 HTML 편집 페이지가 표시됩니다. 파일 업로드 탭을 클릭합니다.

위와 같은 화면이 표시되면 + 추가 버튼을 누르고 방금 다운로드한 jmenu.min.css 파일을 선택하여 업로드합니다.

그러면 위의 그림과 같이 jmenu css 파일이 업로드됩니다. "적용"을 클릭합니다.

3. HTML 편집 페이지에서 HTML 탭을 클릭합니다. 이제 스킨의 기본 메뉴를 JMenu에서 작동하는 메뉴로 교체해야 합니다.

먼저 다음 라인을 <head>.... </head> 사이에 추가합니다.

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

그리고 기본 메뉴 코드를 찾습니다. Book Club 스킨에서는 다음 부분을 찾도록 합니다.

<nav id="gnb">
				[##_blog_menu_##]
			</nav>

위의 부분을 다음과 같은 형식의 코드로 대체합니다.

/* 드롭다운 메뉴 */
<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>

메뉴 항목과 링크는 상황에 맞게 원하는 대로 수정하도록 합니다.

 

그리고 CSS 탭을 클릭하고 메뉴의 스타일을 조정하도록 합니다. 가령 마진이나 패딩, 텍스트 색상 등을 CSS로 조정할 수 있습니다. 저는 다음과 같은 같은 코드를 추가했습니다.

/***********************************/
/**** 티스토리 상단 메뉴 (Top Menu) *******************/

@media only screen and (min-width: 768px) {
.jm-dropdown ul {
    z-index: 99;
}
	.jmenu {
    background: white !important;
    box-shadow: none !important;
}
	
	.jm-dropdown:hover a,.jmenu a:hover, label.jm-menu-btn:hover {
color: red !important;
}
	.jm-dropdown ul a, .jm-dropdown:hover ul a {
    color: #0072bc !important;
}
	
	.jm-collapse {
    border-top: 1px #e0e0e0 solid !important;
}
	
}

@media only screen and (max-width: 767px) {
.jmenu {
    margin-top: 10px;
}
}

위의 방법으로 잘 되는지 테스트해보시기 바랍니다. 잘 작동하지 않는 경우 GitHub 페이지를 자세히 읽어보시면 도움이 될 것입니다.

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    空空(공공)

    시간날때 테스트 적용 한번 해 보도록 해야겠네요
    좋은 정보 입니다.^^

  2. thumbnail
    돈잘

    좋은 정보 얻어 갑니다
    즐거운 하루 보내세요 ^^

  3. thumbnail
    인생2막은 EnJoY

    좋은 정보 잘보고 갑니다~~^^

  4. thumbnail
    정보번식

    감사합니다 번창하세요!

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.01.28 22:17 신고

      감사합니다~ 늦었지만 새해 복많이 받으세요.

    • thumbnail
      정보번식
      2020.01.29 12:01 신고

      카테고리를 누르는데 제가 원하는 카테고리로 연결이 안되는데 연결되게끔 설정하는 법은 어떻게하나요..?

    • thumbnail
      정보번식
      2020.01.29 12:02 신고

      항상 감사합니다. 혹시 워드프레스 님처럼 예를들자면 일상을 클릭하면 일상카테고리로 넘어가게 되는데 그렇게 설정은 어떻게하나요..? 저는 클릭하면 아무 반응이없네요 ㅜ

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.01.29 12:46 신고

      URL 부분에 카테고리의 전체 주소를 입력해보시기 바랍니다.

    • thumbnail
      정보번식
      2020.01.29 14:36 신고

      귀찮게 해서 죄송합니다. url부분이 어딨고 카테고리 주소는 무엇을 말씀하시는지 모르겠네요

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.01.29 16:47 신고

      저는 다음과 같이 추가했습니다:

      <nav class="jmenu" id="jmenunav">
      <label for="menu-btn" class="jm-menu-btn jm-icon-menu"></label>
      <input type="checkbox" id="menu-btn" class="jm-menu-btn">
      <ul class="jm-collapse">
      <li><a href="https://avada.tistory.com/">Home</a></li>
      <li class="jm-dropdown">
      <a href="https://avada.tistory.com/category/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4">워드프레스</a>
      <ul>
      <li><a href="https://avada.tistory.com/category/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4/%ED%85%8C%EB%A7%88">테마</a></li>
      <li><a href="https://avada.tistory.com/category/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4/%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8">플러그인</a></li>
      <li><a href="https://avada.tistory.com/category/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4/%EC%82%AC%EC%9A%A9%20%ED%8C%81">사용 팁</a></li>
      <li><a href="https://avada.tistory.com/category/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4/%EA%B5%AC%EC%B6%95%EC%82%AC%EB%A1%80">구축사례</a></li>
      <li><a href="https://avada.tistory.com/category/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4/%EB%AC%B8%EC%A0%9C%ED%95%B4%EA%B2%B0">문제해결</a></li>
      <li><a href="https://avada.tistory.com/category/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4/%EA%B8%B0%ED%83%80">기타</a></li>

      </ul>
      </li>
      <li class="jm-dropdown">
      <a href="https://avada.tistory.com/category/%EC%9B%B9%ED%98%B8%EC%8A%A4%ED%8C%85">웹호스팅</a>
      <ul>
      <li><a href="https://avada.tistory.com/category/%EC%9B%B9%ED%98%B8%EC%8A%A4%ED%8C%85/%EB%B8%94%EB%A3%A8%ED%98%B8%EC%8A%A4%ED%8A%B8">블루호스트</a></li>
      <li><a href="https://avada.tistory.com/category/%EC%9B%B9%ED%98%B8%EC%8A%A4%ED%8C%85/%EC%82%AC%EC%9D%B4%ED%8A%B8%EA%B7%B8%EB%9D%BC%EC%9A%B4%EB%93%9C">사이트그라운드</a></li>
      <li><a href="https://avada.tistory.com/category/%EC%9B%B9%ED%98%B8%EC%8A%A4%ED%8C%85/%EA%B8%B0%ED%83%80">기타</a></li>
      </ul>
      </li>
      <li><a href="https://avada.tistory.com/category/%EC%9D%BC%EC%83%81">일상</a></li>
      <li><a href="https://avada.tistory.com/category/%EB%B2%88%EC%97%AD">번역</a></li>

      <li class="jm-dropdown">
      <a href="https://avada.tistory.com/category/IT%20%26%20%EA%B8%B0%ED%83%80">IT & 기타</a>
      <ul>
      <li><a href="https://avada.tistory.com/category/IT%20%26%20%EA%B8%B0%ED%83%80/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC">티스토리</a></li>
      <li><a href="https://avada.tistory.com/category/IT%20%26%20%EA%B8%B0%ED%83%80/%EC%95%A0%EB%93%9C%EC%84%BC%EC%8A%A4">애드센스</a></li>
      <li><a href="https://avada.tistory.com/category/IT%20%26%20%EA%B8%B0%ED%83%80/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8">자바스크립트</a></li>
      <li><a href="https://avada.tistory.com/category/IT%20%26%20%EA%B8%B0%ED%83%80/HTML">HTML</a></li>
      <li><a href="https://avada.tistory.com/category/IT%20%26%20기타/CSS">CSS</a></li>
      <li><a href="https://avada.tistory.com/category/IT%20%26%20%EA%B8%B0%ED%83%80/%EC%9C%A0%ED%8A%9C%EB%B8%8C">유튜브</a></li>
      <li><a href="https://avada.tistory.com/category/IT%20%26%20%EA%B8%B0%ED%83%80/IT">기타 IT</a></li>
      </ul>
      </li>

      </ul>
      </nav>

      참고하여 수정해보시기 바랍니다.

    • thumbnail
      정보번식
      2020.01.29 18:25 신고

      감사함니다 시간날따 보면서 하겠습니다ㅠㅠㅠ 정말감사해요

  5. thumbnail
    Deborah

    네 잘 설명해주셨네요. 잘 봤어요.

  6. thumbnail
    [찌쏘]'s Magazine

    와우~ 유용한 css군요. css가 정말 잘만 사용할줄 알면 디자인에 큰 효과를 주는 것 같습니다.

  7. thumbnail
    가족바라기

    유용한 정보를 올려주셨네요
    도움받아 사용해보겠습니다
    감사합니다^^

  8. thumbnail
    Charlie253

    저도 드롭다운 메뉴로 수정하려고 했는데, 유용한 포스팅 감사합니다.
    Avada님 블로그가 완전 노다지였네요 ㅎㅎ
    Avada님 블로그를 참고해서 CSS 수정에 박차를 가하고 있습니다 :D

  9. thumbnail
    아믹달라

    구독하기 버튼이 밑에 있어서 몰랐어요. 이제야 구독합니다. !!!!!!!! ㅋㅋ