Đế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

Chuyển ngôn ngữ

Thứ duy nhất mà người đọc ít tiếng Hàn phải tự tìm được — hỏng cái này là hỏng cả trang.

Điều hướng

Xem trước trực tiếp

Nguồn

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

Cách dùng

  • Viết tên mỗi ngôn ngữ bằng chính ngôn ngữ đó — "Tiếng Việt", không phải "Vietnamese"
  • Không dùng cờ. Quốc gia không phải ngôn ngữ
  • Đánh dấu lựa chọn hiện tại bằng hình, ví dụ dấu tích, chứ không chỉ bằng màu

Điểm cần lưu ý

  • Gắn lang và hreflang cho từng mục để trình đọc phát âm đúng
  • Sau khi đổi, giữ người dùng ở đúng trang đó, đừng đưa về trang chủ

Tiếp theo