Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Mục lục

Dùng cho bài dài, khi người đọc cần luôn thấy phần đang đọc nằm ở đâu trong toàn bài.

Điều hướng

Xem trước trực tiếp

Nguồn

<nav class="dc-toc" aria-labelledby="dc-toc-h">
  <h2 class="dc-toc__title" id="dc-toc-h">이 문서의 차례</h2>
  <ul class="dc-toc__list">
    <li class="dc-toc__item"><a class="dc-toc__link" href="#dc-toc-s1">계약하기 전에 확인할 것</a></li>
    <li class="dc-toc__item">
      <a class="dc-toc__link is-now" href="#dc-toc-s2" aria-current="true">근로계약서 읽는 법</a>
      <ul class="dc-toc__sub">
        <li class="dc-toc__item"><a class="dc-toc__link dc-toc__link--sub" href="#dc-toc-s2a">근무 시간과 휴게</a></li>
        <li class="dc-toc__item"><a class="dc-toc__link dc-toc__link--sub" href="#dc-toc-s2b">임금과 지급일</a></li>
      </ul>
    </li>
    <li class="dc-toc__item"><a class="dc-toc__link" href="#dc-toc-s3">4대 보험과 세금</a></li>
    <li class="dc-toc__item"><a class="dc-toc__link" href="#dc-toc-s4">문제가 생겼을 때 어디로</a></li>
  </ul>
</nav>
.dc-toc { max-width:300px; font-family:var(--dc-font); }
.dc-toc__title { margin:0 0 var(--dc-2); font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--dc-text-mute); }
.dc-toc__list { margin:0; padding:0; list-style:none; }
.dc-toc__sub { margin:2px 0 0; padding:0; list-style:none; }
.dc-toc__item { margin:0; }
.dc-toc__link { display:block; padding:var(--dc-2) var(--dc-3); border-left:2px solid var(--dc-line); border-radius:0 var(--dc-r-xs) var(--dc-r-xs) 0; color:var(--dc-text-sub); font-size:13px; line-height:1.45; text-decoration:none; transition:background var(--dc-fast), color var(--dc-fast); }
.dc-toc__link:hover { background:var(--dc-sunken); color:var(--dc-text); }
.dc-toc__link.is-now { border-left-color:var(--dc-brand); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-weight:700; }
.dc-toc__link--sub { padding-left:var(--dc-6); font-size:12px; }
.dc-toc--box { max-width:320px; padding:var(--dc-4); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-1); }
.dc-toc__fold { max-width:340px; border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); font-family:var(--dc-font); }
.dc-toc__sum { display:flex; align-items:center; gap:var(--dc-2); min-height:44px; padding:var(--dc-2) var(--dc-4); font-size:13px; font-weight:700; color:var(--dc-text); cursor:pointer; }
.dc-toc__sum::-webkit-details-marker { display:none; }
.dc-toc__caret { margin-left:auto; font-size:11px; color:var(--dc-text-sub); transition:transform var(--dc-fast); }
.dc-toc__fold[open] .dc-toc__caret { transform:rotate(180deg); }
.dc-toc__fold[open] .dc-toc__sum { border-bottom:1px solid var(--dc-line); }
.dc-toc__foldbody { padding:var(--dc-3) var(--dc-3) var(--dc-4); }

Cách dùng

  • Chỉ lấy hai cấp tiêu đề — sâu hơn nữa thì mục lục thành một bài khác
  • Điểm nhấn di chuyển theo vị trí đang đọc, và chỉ một dòng được nhấn
  • Bỏ mục lục nếu bài chỉ có ba phần hoặc ít hơn

Điểm cần lưu ý

  • Đặt aria-current cho dòng hiện tại và đổi cả độ đậm hoặc nền — đừng chỉ đổi màu
  • Màn hình hẹp thì gập lại thành khối mở được, để không chiếm chỗ của nội dung

Tiếp theo