티스토리 상단 카테고리 메뉴바

2018. 12. 28. by 원더바웃

티스토리 카테고리 구조에 맞게 CSS로 작성된 드롭다운 내비게이션 바입니다.
티스토리 스킨 대부분이 서브 메뉴가 있는 내비게이션 메뉴바가 없는 것 같아 기본 베이스로 만들었습니다.

티스토리 카테고리 구조

  • HTML
<ul class="tt_category">
  <li class="">
    <a class="link_tit" href="/category">전체보기</a>
    <ul class="category_list">
      <li class="">
        <a class="link_item" href="#">메뉴1</a>
      </li>
      <li class="">
        <a class="link_item" href="#">메뉴2</a>
      </li>
      <li class="">
        <a class="link_item" href="/category/메뉴3">메뉴3</a>
        <ul class="sub_category_list">
          <li class="">
            <a class="link_sub_item" href="#">서브메뉴1</a>
          </li>
          <li class="">
            <a class="link_sub_item" href="#">서브메뉴2</a>
          </li>
          <li class="">
            <a class="link_sub_item" href="#">서브메뉴3</a>
          </li>
        </ul>
      </li>
      <li class="">
        <a class="link_item" href="#">메뉴4</a>
      </li>
    </ul>
  </li>
</ul>

스킨에 적용 하기

  • html 편집창
<nav class="top-navbar">


</nav>
  • css 편집창
.tt_category li a.link_tit {
    display:none;
}
.top-navbar {
  padding: 26px 0;
  font-size: .875rem;
}
.top-navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ffffff;
}
.category_list li {
  display: inline-block;
}
.category_list li:hover {
  background-color: #fafafa;
}
.category_list li a {
  display: inline-block;
  color: #000000;
  text-align: center;
  padding: 6px 16px;
  text-decoration: none;
}
.category_list li a:hover {
  color: #7a583a;
}
.sub_category_list {
  display: none;
  position: absolute;
  background-color: #ffffff;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;  
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  font-size: .875rem;
  min-width: 120px;
  z-index: 999;
}
.category_list li:hover .sub_category_list {
  display: block;
}
.sub_category_list li {
  display:block;
}
.sub_category_list li a{
  display: block;
  color: #000000;
  text-align: left;
  padding: 6px 16px;
  text-decoration: none;
}
.sub_category_list li a:hover {
  background-color: #fafafa;
}

각자 스킨에 맞게 꾸며서 사용하면 되겠습니다

 

반응형