[Jekyll] 깃허브 지킬 블로그 드롭다운 메뉴, 서브 카테고리 만들기 (Jekyll hierarchical category)

3 minute read

Updated:

안녕하세요. 오늘은 깃허브 블로그의 상단 메뉴바에 드롭다운, 또는 서브메뉴 만드는 법을 알아볼게요.

다양한 서치 키워드로 찾아보았지만, (Jekyll category dropdown, Jekyll navbar hierarchical category, Jekyll category submenu, Jekyll multi-level navbar) 정보가 많이 없더라구요.

저는 mmistakes 님의 Minimal-mistakes 테마에서 조금씩 수정해서 위의 모습으로 만들었습니다. 가장 도움을 많이 받은 방법은, 원작자님 깃허브 프로젝트의 Issues 섹션에서 menu dropdown 등의 원하는 키워드로 찾아보는 것이었어요. 비슷한 기능을 원하는 사람도, 이미 기능을 구현해서 올린 이슈도 있었거든요.


Table of Contents

Navigation 바를 컨트롤 하는 파일입니다. 메인 카테고리 밑에 sublinks를 추가하여 원하는 서브 카테고리를 추가하세요. 총 2개의 레벨까지만 지원합니다.

masthead.html 수정하기

_includes 폴더의 masthead.html 에 아래 코드를 추가합니다. sublinks 가 있다면, 그 링크들을 iterate 하여 보여주는 코드입니다. . 아래 사진의 위치에 코드를 넣어주세요.

코드입니다.


<ul class="visible-links">
   {%- for link in site.data.navigation.main -%}
       {% assign class = nil %}
       {% if page.url contains link.url %}
           {% assign class = 'active' %}
       {% endif %}
       {% if link.sublinks %}
           <li class="dropdown {{ class }}">
               <a class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ link.title }}  <i class="fa fa-caret-down fa-sm" aria-hidden="true"></i><span class="caret"></span></a>

               <ul class="dropdown-content" >
                   {% for sublink in link.sublinks %}
                       <a class = "dropdown-item" href="{{ site.baseurl }}{{ sublink.url }}">    {{ sublink.title }}</a>
                   {% endfor %}
               </ul>
           </li>
       {% else %}
           <li class="masthead__menu-item">
               <a href="{{ site.baseurl }}{{ link.url }}">{{ link.title }}</a>
           </li>
       {% endif %}
   {% endfor %}
</ul>

_navigation.scss 수정하기

이제는 스타일을 수정합니다 - _sass폴더의 _navigation.scss 파일을 열어주세요. .greedy-nav {} 안의속성의 값을 바꿔줄건데요, 그리디 네브는 이 테마에서 상단 네비게이션 바의 이름입니다.

아래 코드가 완벽하진 않아요. 하지만 해당 속성을 기본값으로 하시고, 원하는대로 바꿔서 사용하시길 바랍니다. visible link는 마우스가 호버 됐을때의 스타일 값이고, hidden links는 안된 상태의 스타일입니다. 메뉴 폭이나 마진을 바꾸실때 꼭 둘 다 바꾸셔야 통일감이 있습니다.

이 커밋 을 참고하시기 바랍니다.


💡 .greedy-nav{
// 여기에 들어가는 코드입니다!
}

  // to be shared by both hidden link and visible link
  .dropdown {
    // float: left;
    width: auto;
    box-sizing: border-box;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: darken($background-color, 3%);
    // min-width: 160px;
    box-shadow: $box-shadow;
    z-index: 1;
    box-sizing: border-box;
  }

  .dropdown:hover .dropdown-content {
    display: block;
    // font-size: 17px;
  }

  .dropdown-item {
    padding: 10px;
    font-size: 15px;
  }


  .visible-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;

    li {
      -webkit-box-flex: 0;
      -ms-flex: none;
      flex: none;
      display: list-item;
      text-align: -webkit-match-parent;
    }

    a {
      position: relative;

      &:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 4px;
        background: $primary-color;
        width: 100%;
        -webkit-transition: $global-transition;
        transition: $global-transition;
        -webkit-transform: scaleX(0) translate3d(0, 0, 0);
        transform: scaleX(0) translate3d(0, 0, 0); // hide
      }

      &:hover:before {
        -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
        transform: scaleX(1); // reveal
      }
    }
  }


  .hidden-links {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 15px;
    padding: 5px;
    border: 1px solid $border-color;
    border-radius: $border-radius;
    background: $background-color;
    -webkit-box-shadow: 0 2px 4px 0 rgba(#000, 0.16),
      0 2px 10px 0 rgba(#000, 0.12);
    box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);

    &.hidden {
      display: none;
    }

    a {
      margin: 0;
      padding: 10px 20px;
      font-size: $type-size-5;

      &:hover {
        color: $masthead-link-color-hover;
        background: $navicon-link-color-hover;
      }
    }

    &:before {
      content: "";
      position: absolute;
      top: -11px;
      right: 10px;
      width: 0;
      border-style: solid;
      border-width: 0 10px 10px;
      border-color: $border-color transparent;
      display: block;
      z-index: 0;
    }

    &:after {
      content: "";
      position: absolute;
      top: -10px;
      right: 10px;
      width: 0;
      border-style: solid;
      border-width: 0 10px 10px;
      border-color: $background-color transparent;
      display: block;
      z-index: 1;
    }

    li {
      display: block;
      border-bottom: 1px solid $border-color;

      &:last-child {
        border-bottom: none;
      }
    }
  }//hidden link

이렇게 하시면, 기본적인 세팅은 끝납니다! 브라우저의 inspect element 기능으로, 원하는 속성 이름을 찾으신 뒤, 세세하게 스타일 바꾸시면 될 것같아요.

앞으로의 수정방향

  • 메뉴가 겹쳐졌을때, 오버랩이 아닌 메뉴 공간 확보가 되도록 하기
    • Screenshot 2020-12-28 at 1 35 00 pm -> 다음메뉴인 Categories가 가려서 보이지 않음
  • 메인 카테고리와 서브 카테고리의 넓이 맞추기 -> 더 깔끔함
    • Screenshot 2020-12-28 at 1 39 56 pm

참고링크

  • https://thinkshout.com/blog/2014/12/creating-dynamic-menus-in-jekyll/
  • http://planetjekyll.github.io/snippets/nav-with-data.html
  • https://github.com/mmistakes/minimal-mistakes/issues/1801

Leave a comment