Book Club 스킨 NavBar 'current' 표시 형태 수정

티스토리 북클럽 스킨 GNB navigation bar "current" 표시 방법 변경 코드

 

$(window).load(function(){
	$gnb.find("li").each(function(){
		gnbWidth  = gnbWidth + $(this).outerWidth() + 1;
		if ( window.location.pathname.indexOf($(this).find("a").attr("href")) != -1 ){
			$(this).addClass("current");
		}
	});
	$gnb.find("ul").width(gnbWidth);

	if ( $gnb.width() < $gnb.find("ul").width() && $gnb.find(".current").length ){
		var scrollPos = $gnb.find(".current").prev().length ? $gnb.find(".current").prev().position().left : $gnb.find(".current").position().left;
		$gnb.scrollLeft( scrollPos );
	}
});

 

티스토리 북클럽 스킨의 script.js 파일의 GNB 관련 코드입니다. GNB는 블로그 페이지 상단의 내비게이션 바 메뉴를 말합니다.

 

1. 현재 페이지가 메뉴 항목과 일치하면 "current" 클래스를 추가합니다.

2. 각각의 메뉴 버튼의 가로폭을 계산하여 "current" 표시한 메뉴 항목이 리스트의 가운데에 위치하도록 이동합니다. 이렇게 이동하는 이유는 가로폭이 좁은 모바일 기기에서 현재 페이지가 어디인지 한눈에 확인 가능하도록 가로 스크롤 위치를 중앙으로 변경하는 것입니다.

 

이 글에서는 2번 항목을 수정하여 "current" 표시한 메뉴 항목을 리스트의 처음으로 이동하는 방법을 다룹니다. 한 마디로 현재 보는 페이지에 해당하는 메뉴 버튼을 맨 앞으로 이동하는 것입니다.

 

2와 방법의 차이는 있지만 연산 과정을 많이 줄일 수 있습니다. 각각의 메뉴 버튼의 폭을 계산할 필요가 없고 "current" 표시 메뉴를 중앙으로 이동할 필요도 없기 때문입니다.

---

대신 메뉴 자체의 순서가 바뀌므로 편하게 확인할 수 있도록 눈에 띄는 색을 사용하여 정확하게 표시해 주어야 합니다.

현재 페이지(current) 아닌 상태

현재 페이지, 앞으로 이동 밑줄 추가

---

바뀐 형태는 지금 보는 페이지 최상단의 (GNB) 메뉴 리스트를 참고합니다.

 

코드 수정 방법은 간단합니다.

 

1. 아래 한 줄의 코드를 기존 코드에 추가합니다.

$( "#gnb ul" ).prepend( $(this) );

 

2. 그리고 필요 없는 나머지 코드를 삭제합니다.

---

변경 사례 1, 북클럽 원본 코드 수정

북클럽 스킨 script.js 파일의 원본 코드에 위의 코드를 추가하고 필요 없는 코드를 삭제하였습니다.

변경 사례 1
(북클럽 script.js 원본 코드 수정)

$(window).load(function(){
	$gnb.find("li").each(function(){
		if ( window.location.pathname.indexOf($(this).find("a").attr("href")) != -1 ){
			$(this).addClass("current");
			$( "#gnb ul" ).prepend( $(this) );
		}
	});
});


변경 사례 1 수정
수정일: 2021.10.25
수정내용:
- 'return: false;' 추가
- 'current' 추가하고 each loop 중단

$(window).load(function(){
	$gnb.find("li").each(function(){
		if ( window.location.pathname.indexOf($(this).find("a").attr("href")) != -1 ){
			$(this).addClass("current");
			$( "#gnb ul" ).prepend( $(this) );
			return false;
		}
	});
});

 

변경 사례 2, 개인 사용 코드

개인적으로 수정하여 사용하고 있는 코드입니다. 위 코드와 동일한 기능을 수행하며 일부 오류를 수정한 것입니다.

※ 북클럽 스킨 원본 코드와 달리 블로그의 파일 링크도 현재 접속 메뉴로 표시되며, 홈 링크가 항상 표시되는 오류를 고친 수정 코드입니다.

GNB 메뉴의 오류 수정 내용은 링크한 페이지에서 자세하게 설명하고 있습니다.

아래 링크 페이지의 내용은 본 글의 메뉴 이동 수정 방법을 적용하지 않은 상태입니다.

 

Book Club 스킨 NavBar(GNB) 오류 수정, TechWrite, Translation (tistory.com)

Book Club 스킨 NavBar(GNB) 오류 수정

 

변경 사례 2
(개인 사용 코드)

$(document).ready(function() {
	$gnb.find("li").each(function() {
		if ($(this).find("a").prop("href") == window.location.href) {
			$(this).addClass("current");
			$("#gnb ul").prepend($(this));
		}
	});
});


변경 사례 2 수정
수정일: 2021.10.25
수정 내용: 
- 'return: false;' 추가
- 'current' 지정하고 each loop 중단

$(document).ready(function() {
	$gnb.find("li").each(function() {
		if ($(this).find("a").prop("href") == window.location.href) {
			$(this).addClass("current");
			$("#gnb ul").prepend($(this));
			return false;
		}
	});
});