320x100
|
|
티스토리 블로그 상단에 제 경우 메뉴를 몇개 카테고리 메뉴를 빼 놓았습니다. 블로그의 홈, 공지, 방명록, 태그 등은 선택된 상태를 유지 할 수 있지만 카테고리 메뉴는 선택된 내용을 유지할 수 없습니다. 복잡한 설명은 빼고 자신의 블로그에 메뉴로 빼둔 부분이 있다면 선택해서 CSS 의 hover 를 건드려 두셨다면 적용 안되는걸 볼 수 있을겁니다.
제 생각에 처음에는 BODY ID 를 알아올 수 없을까 했는데 제한을 해둬서 그게 안되더군요. 그래서 사이트의 주소 끝부분을 읽어와서 특정 내용과 일치하면 CSS 속성을 변경해보기로 했습니다.
<head>
<script src="./images/jquery.min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function()
{
var pathname = window.location.pathname;
if(pathname == "/category/하드웨어/뉴스" || pathname == "/category/%ED%95%98%EB%93%9C%EC%9B%A8%EC%96%B4/%EB%89%B4%EC%8A%A4"){
$("#navNews a").css('border-bottom','2px solid #FF9933');
$("#navNews a").css('color','#ffffff');
}
});
//]]>
</script>
<script src="./images/jquery.min.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function()
{
var pathname = window.location.pathname;
if(pathname == "/category/하드웨어/뉴스" || pathname == "/category/%ED%95%98%EB%93%9C%EC%9B%A8%EC%96%B4/%EB%89%B4%EC%8A%A4"){
$("#navNews a").css('border-bottom','2px solid #FF9933');
$("#navNews a").css('color','#ffffff');
}
});
//]]>
</script>
물론 코드는 엉망이긴 하지만, location.pathname 을 가져와서 특정 문구와 맞을 경우 해당 li 의 class 에 속성을 변경하도록 했습니다. 문제는 티스토리의 포스트 주소가 변경 될 때 해당 내용이 없고 그냥 숫자 URL 로 되어 있을 경우 어디에 있는 문서인지 확인할 수 가 없네요. 물론 이것도 좀 더 꽁수를 써서 category 이름을 본문에서 치환자를 가져와서 비교하면 되긴 하지만.. 아직 그건 안해봤네요.
위에 내용이 복잡하다면 그냥 제 블로그에 상단에 중앙쪽에 있는 메뉴들을 눌러서 뭔가 변하는지 살펴봐주세요. 혹시라도 비슷한 내용을 찾고 있는분께 도움이 되었음 합니다. 좀 더 좋은 방법을 알고 계신분 알려주셔도 감사하겠습니다.
|
|
반응형
'유용한_팁 > 블로그_팁' 카테고리의 다른 글
| IE6 에뮬레이터 IETester 설치 사용 방법 (4) | 2011.12.22 |
|---|---|
| 블로그 페이지뷰 카운터 Flag Counter 설치 사용 (8) | 2011.11.08 |
| 티스토리 스팸관리 이제는 근본적인 대처가 필요하다 (19) | 2011.07.01 |
| 티스토리 모바일 페이지 리뷰 완벽판 좋은점 아쉬운점 (33) | 2011.03.29 |
| 사진 출처 일괄 적용 블로그팁 (21) | 2011.03.12 |
댓글