바닐라 JavaScript로 현재 페이지 메뉴 항목 강조 표시하는 방법

웹사이트 내비게이션 바(메뉴)에서 현재 활성화된 페이지를 강조 표시하는 방법을 알아보세요.

사용자가 페이지 사이를 이동할 때 현재 보고 있는 페이지에 해당하는 메뉴 항목을 강조 표시하는 것은 웹사이트에서 매우 흔하게 볼 수 있는 기능입니다. 이 글에서는 외부 라이브러리 없이 순수한 바닐라 JavaScript만으로 이 기능을 구현하는 방법을 단계별로 살펴보겠습니다.

1단계: 간단한 메뉴 만들기

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

먼저 Home, About, Contact 세 개의 링크로 구성된 기본적인 내비게이션 메뉴를 준비합니다.

2단계: CSS 스타일링

메뉴에 적용할 간단한 CSS 스타일입니다. 여기서 핵심은 .current 클래스로, 3단계에서 현재 활성화된 페이지에 해당하는 메뉴 항목에 이 클래스를 추가하게 됩니다.

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

.current {
	color: #df3e23;
}

.current 클래스가 적용된 링크는 붉은색 계열(#df3e23)로 표시되어, 사용자가 현재 어느 페이지에 있는지 한눈에 파악할 수 있습니다.

3단계: JavaScript

아래 코드는 현재 페이지의 URL을 확인한 후, 그 URL과 일치하는 메뉴 링크에 current 클래스를 추가합니다.

let 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';

코드 동작 원리:

• document.links는 문서 내 모든 <a> 요소의 컬렉션을 반환합니다.
• 반복문을 돌며 각 링크의 href 값과 현재 페이지 URL(document.URL)을 비교합니다.
• URL이 일치하면 해당 링크의 인덱스를 저장하고, 마지막으로 그 링크에 current 클래스를 할당해 강조 효과를 적용합니다.

참고로 변수에 값을 재할당해야 하므로 const가 아닌 let으로 선언해야 오류 없이 정상적으로 동작합니다. 이처럼 몇 줄의 코드만으로도 별도의 라이브러리나 프레임워크 없이 현재 페이지 메뉴 강조 기능을 손쉽게 구현할 수 있습니다.