티스토리 메뉴 현재 위치 표시

 

적용을 위해서는 스킨 편집에서 메뉴에 적용된 클래스를 알아야 합니다.

 

블로그 태그 확인

<nav class="blog-menu">
    [＃＃_blog_menu_＃＃]
</nav>

적용을 위해서는 일단 스킨에서 블로그 메뉴  [＃＃_blog_menu_＃＃] 치환자가 적용된 적용된 태그의 클래스를 알아야 합니다.

 

 

 

<nav class="blog-menu">
    <ul>
        <li class="t_menu_home first"><a href="/" target="">Home</a></li>
        <li class="t_menu_guestbook last"><a href="/guestbook" target="">Guest Book</a></li>
    </ul>
</nav>

치환자를 사용하면 별도로 태그를 삽입할 필요 없이 꾸미기에서 설정한 메뉴를 리스트 태그로 만들어 적용을 하게 됩니다.

 

 

jQuery 적용

$(window).load(function(){
    $('.blog-menu').find('li').each(function(){
        if ( window.location.pathname == $(this).find('a').attr('href')){
            $(this).addClass('current');
        }
    });
});

코드 중  $('.blog-menu').find('li').each(function() 두 번째 줄에 있는 클래스만 자신에게 맞는 클래스로 변경하여 주면 현재 페이지가 리스트에 있는 주소인지 확인을 하고 맞다면 해당 요소에 current라는 클래스를 자동으로 추가하게 됩니다.

 

클래스가 아니고 <nav ID="blog-menu">로 적용이 되었다면 $('#blog-menu') 로 변경하여 적용합니다.

 

속성 추가

.blog-menu ul li.current {
	background: #04beb8;
}

추가된 요소에 속성을 추가하게 되면 현재 주소와 메뉴 주소가 동일할 경우 추가적으로 속성을 적용됩니다.

 

 

적용 결과

jQuery 적용

추가한 배경 속성이 해당 메뉴에만 적용이 되어 현재 위치를 알 수 있으며, 배 경외에 모든 속성을 적용하여 표시할 수 있습니다.