일상다반사

새벽에 해본 뻘짓 이야기 2탄

또리머 2022. 11. 4. 01:55
반응형

2022.10.31 - [일상다반사] - 새벽에 해본 뻘짓 이야기

 

새벽에 해본 뻘짓 이야기

이것저것 해보았는데 하위 카테고리를 노출할 수 있는 기능이 없었다. 아예 이걸 갈아엎기엔 먼 길이 될 수도 있다는 생각이 들어서.. 스킨을 바꾸기로 했다. https://ctkim.tistory.com/97?category=903188

ddorimeo.tistory.com

지난 번에 하위 카테고리가 나오지 않아 결국 스킨을 바꿨는데
이전 스킨이 더 마음에 들어서 다시 바꾸고, 카테고리를 손보기로 결심했다.
사실 결심은 아니고 갑자기 했다.

이전 카테고리

깔끔하고 좋긴 한데 게시물 내용에 요약이 안 나온다던지 하는 자잘한 문제가 있어서 다시 돌아왔다.

메뉴 변천사

1 -> 2로 갈 땐 우선 하위 카테고리를 노출시키고, border를 대메뉴의 아래쪽으로만 두었다.
하위 카테고리 정렬도 오른쪽으로 변경했다.
(참고로 첫번째 사진에 홈, 공부기록/TIL 등은 카테고리 표시가 아니라 "링크"라는 티스토리의 다른 기능을 이용한 것ㅠㅠ)

근데 카테고리에 들어갔을 때 지금 어느 카테고리에 있는지 표시를 할 수 없었다.
그 정도는 선택자가 이미 구현되어 있어서 쉽게 바꿀 수 있었는데,
문제는 글을 읽으러 들어가거나 외부 링크를 통해 들어오면 현재 카테고리 표시가 되지 않았다😭

결국 자바 스크립트까지 추가해서 잔뜩 손봤다.. 야매로 하느라 힘들었다...ㅋㅋjQuery... 👊
프론트 나름 재밌네 그래........
그리하여 완성 된 것이 ㅁㅏ지막 사진...
이제 게시글을 읽어도 외부에서 링크를 타고 들어와도 글자 크기를 키워 표시해준다.

<script type="text/javascript">
	$(document).ready(function () {
		var cate = $('.another_category').children('h4').children('a').attr("href"); 
		var sub_cate = $('.another_category').children('h4').children('a').next().attr("href"); 
		if ( sub_cate != undefined ) {
			sub_cate = sub_cate.replace('/category','');
			$('.sub_category_list').find('.link_sub_item')
            				       .filter('[href="' + cate + sub_cate + '"]')
            				       .addClass('active');
		} else {
			$('.category_list').find('.link_item')
            				   .filter('[href="' + cate + '"]')
            				   .addClass('active');
		} 
	});
	$(function () { $(".active").attr("style", "font-size:17px;"); });
</script>


선택자 찾느라 눈알이 빠질 뻔 했지만 다 해두니 아주 뿌듯하다.
구현하는 것도 중요하지만........
스킨마다 다르게 적용될테니 적당한 선택자를 찾는 것이 중요하다......

역시 할 일이 많을 때는 뻘짓이 제일 재미있다
ㅇㅣ제 얼른 자자.........!!!!!!!!!!!!!!!!!!!

+ 마우스 폭죽 효과도 다시 등장시켰다ㅋㅋ

반응형