Pengalih bahasa
Satu kontrol yang harus ditemukan sendiri oleh orang yang tidak lancar bahasa Korea — gagal di sini, gagal seluruh situs.
Pratinjau langsung
Sumber
<div class="dc-lang">
<details class="dc-lang__menu" open>
<summary class="dc-lang__btn">
<span class="dc-lang__globe" aria-hidden="true">🌐</span>
<span class="dc-lang__cur" lang="ko">한국어</span>
<span class="dc-lang__caret" aria-hidden="true">▾</span>
<span class="dc-sr">언어 바꾸기 — 지금은 한국어</span>
</summary>
<ul class="dc-lang__list">
<li><a class="dc-lang__item is-now" href="/ko/" lang="ko" hreflang="ko" aria-current="true">한국어<span class="dc-lang__tick" aria-hidden="true">✓</span></a></li>
<li><a class="dc-lang__item" href="/en/" lang="en" hreflang="en">English</a></li>
<li><a class="dc-lang__item" href="/vi/" lang="vi" hreflang="vi">Tiếng Việt</a></li>
<li><a class="dc-lang__item" href="/ne/" lang="ne" hreflang="ne">नेपाली</a></li>
<li><a class="dc-lang__item" href="/km/" lang="km" hreflang="km">ភាសាខ្មែរ</a></li>
<li><a class="dc-lang__item" href="/id/" lang="id" hreflang="id">Bahasa Indonesia</a></li>
</ul>
</details>
</div>.dc-lang { position:relative; font-family:var(--dc-font); }
.dc-lang__menu { display:inline-block; }
.dc-lang__btn { display:inline-flex; align-items:center; gap:var(--dc-2); min-height:44px; padding:var(--dc-2) var(--dc-4); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-full); background:var(--dc-surface); font-size:14px; font-weight:600; color:var(--dc-text); cursor:pointer; }
.dc-lang__btn:hover { background:var(--dc-sunken); }
.dc-lang__btn::-webkit-details-marker { display:none; }
.dc-lang__caret { font-size:11px; color:var(--dc-text-sub); transition:transform var(--dc-fast); }
.dc-lang__menu[open] .dc-lang__caret { transform:rotate(180deg); }
.dc-lang__globe { font-size:15px; line-height:1; }
.dc-lang__cur { line-height:1.2; }
.dc-lang__list { position:absolute; z-index:10; min-width:200px; margin:var(--dc-1) 0 0; padding:var(--dc-1); border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); box-shadow:var(--dc-sh-2); list-style:none; }
.dc-lang__item { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-3); min-height:44px; padding:var(--dc-2) var(--dc-3); border-radius:var(--dc-r-sm); color:var(--dc-text); font-size:14px; text-decoration:none; }
.dc-lang__item:hover { background:var(--dc-sunken); }
.dc-lang__item.is-now { background:var(--dc-brand-soft); color:var(--dc-brand-text); font-weight:700; }
.dc-lang__tick { font-size:13px; line-height:1; }
.dc-lang--inline .dc-lang__row { display:flex; flex-wrap:wrap; gap:var(--dc-2); margin:0; padding:0; list-style:none; }
.dc-lang__chip { display:inline-flex; align-items:center; gap:var(--dc-1); min-height:40px; padding:var(--dc-2) var(--dc-4); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-full); background:var(--dc-surface); color:var(--dc-text-sub); font-size:13px; text-decoration:none; }
.dc-lang__chip:hover { border-color:var(--dc-text-sub); background:var(--dc-sunken); color:var(--dc-text); }
.dc-lang__chip.is-now { border-color:var(--dc-brand); background:var(--dc-brand-soft); color:var(--dc-brand-text); font-weight:700; }
.dc-lang--form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--dc-2); }
.dc-lang__label { display:block; width:100%; margin-bottom:var(--dc-1); font-size:12px; font-weight:600; color:var(--dc-text-sub); }
.dc-lang__select { min-height:44px; padding:var(--dc-2) var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:14px; }
.dc-lang__go { min-height:44px; padding:var(--dc-2) var(--dc-4); border:1px solid var(--dc-brand); border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:14px; font-weight:700; }
.dc-lang__go:hover { background:var(--dc-brand-hi); border-color:var(--dc-brand-hi); }Cara memakainya
- Tulis nama bahasa dalam bahasa itu sendiri — "Tiếng Việt", bukan "Vietnamese"
- Jangan pakai bendera. Negara bukan bahasa
- Tandai pilihan aktif dengan bentuk seperti centang, bukan hanya warna
Hal yang perlu diwaspadai
- Sertakan lang dan hreflang di setiap pilihan agar pembaca layar melafalkannya dengan benar
- Setelah berganti, tetap di halaman yang sama; jangan kembalikan ke halaman depan