មាតិកា

ប្រើសម្រាប់អត្ថបទវែង ពេលអ្នកអានត្រូវឃើញជាប់ថាផ្នែកដែលកំពុងអាននៅទីណាក្នុងទាំងមូល។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

<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); }

របៀបប្រើ

យកតែចំណងជើងពីរកម្រិត — ជ្រៅជាងនេះ មាតិកាក្លាយជាអត្ថបទមួយទៀត
ពេលទីតាំងអានផ្លាស់ ការបញ្ជាក់ក៏ផ្លាស់តាម ហើយបញ្ជាក់តែមួយជួរប៉ុណ្ណោះ
បើមានតែបីផ្នែកឬតិចជាង មិនត្រូវដាក់មាតិកាទេ

ចំណុចត្រូវប្រុងប្រយ័ត្ន

ដាក់ aria-current លើជួរបច្ចុប្បន្ន ហើយប្ដូរភាពដិតឬផ្ទៃខាងក្រោយផង — មិនត្រូវពណ៌តែម្នាក់ឯង
លើអេក្រង់តូច សូមបត់ជាប្លុកបើកបាន ដើម្បីមិនស៊ីកន្លែងអត្ថបទ

បន្ទាប់

ក្បាលទំព័រ ការរុករក វេប

មឺនុយទម្លាក់ ការរុករក វេប

ផ្លូវនាំ breadcrumb ការរុករក វេប

ការបែងចែកទំព័រ ការរុករក វេប