Highlight เมนูหน้าปัจจุบัน ด้วย Vanilla JavaScript

เรียนรู้วิธี highlight เมนูหน้าปัจจุบันใน navigation bar ของเว็บไซต์

ฟีเจอร์ทั่วไปของเว็บไซต์คือ highlight เมนูของหน้าที่กำลังดูอยู่ เมื่อผู้ใช้.navigate ระหว่างหน้า

วิธีทำด้วย Vanilla JavaScript:

Step 1: เมนูเรียบง่าย

<nav class="navbar">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

Step 2: CSS Styling

CSS ขั้นพื้นฐาน ส่วนสำคัญคือคลาส .current ซึ่งจะเพิ่มให้เมนูหน้าปัจจุบันใน Step 3:

.navbar {
  background-color: #111;
  padding: 1rem;
}
.navbar a {
  text-decoration: none;
  color: white;
  padding: 1rem;
}
.current {
  color: #df3e23;
}

Step 3: JavaScript

โค้ดนี้จะหา URL หน้าปัจจุบัน และเพิ่มคลาส current ให้เมนูที่ตรงกัน:

const current = 0;
for (var i = 0; i < document.links.length; i++) {
  if (document.links[i].href === document.URL) {
    current = i;
  }
}
document.links[current].className = 'current';