티스토리 블로그 꾸미기 (사이드바 모듈 접기,펼치기 제이쿼리)

블로그를 하면서 글 작성 시 내용을 그리 길게 적기 않기에 본문에 비해 사이드바가 상당히 길어 사이드 바를 깔끔하게 보고자 오랜 시행착오 끝에 제이쿼리를 이용해 제목을 클릭 해면 열리고 그 외 다른 모듈들은 닫히는 방식으로 완성한 소스를 공유합니다.

정식으로 배운 적이 없기에 여러 메뉴를 만들어 주는 사이트나 지식을 공유하는 블로그 등지를 돌아 봤지만 티스토리 사이드바와 비슷한 환경의 소스가 없어 매우 고생하며 만들었네요..

<div id="sidebar">
	<div class="sidebar"><!-- 사이드바 -->
		<s_sidebar><!-- 오른쪽 사이드바 -->
			
			<s_sidebar_element><!-- 카테고리 -->
				<div class="sidebar_element category">
					<h3>Category</h3>
					[##_category_list_##] 
				</div>
			</s_sidebar_element>
			<s_sidebar_element><!-- 최근에 올라온 글 -->
				<div class="sidebar_element recentPost">
					<h3>Recent Post</h3>
					<ul>
						<s_rctps_rep>
							<li>
								<a href="[##_rctps_rep_link_##]">
									<span class="title">[##_rctps_rep_title_##].
										<span class="cnt">[##_rctps_rep_rp_cnt_##]</span>
									</span>
								</a>
							</li>
						</s_rctps_rep>
					</ul>
				</div>
			</s_sidebar_element>

		</s_sidebar>
	</div><!-- 사이드바 끝 -->
</div><!-- sidebar close -->

제가 사용하는 스킨의 사이드바 환경입니다. 위와 같은 방식에 클래스명이 다를 경우 제이쿼리에서 그에 맞게 클래스명을 부여해주면 되지만 구성이 다를 경우 HTML을 수정하던지 적용이 어려울 수 있겠습니다.

H3를 클릭하면 ‘ul’ 태크를 펼치거나 접는 방식이기에 H3가 ‘ul’ 태그에 속하지만 않으면 많은 스킨에서 쉽게 적용 가능할 듯 합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>	

<script type="text/javascript">
$(document).ready(function() {
	$(".sidebar ul").hide(); // 사이드바 전체 "ul"을 숨김
	$(".category h3").addClass("active"); // 카테고리 모듈 펼침에 따른 클래스 생성  
	$(".category ul").show(); // 카테고리 펼침
	$(".sidebar h3").append("<span class='sub_plus'>+</span>"); // 펼침이 가능한 표시 "+" 생성
	$(".sidebar h3").click(function(){ // 모듈 제목 H3 클릭하면
		$(".sidebar_element ul:visible").slideUp(); // 보여지고 있는 모듈 닫기
		$(".sidebar h3").removeClass("active"); // 생성된 클래스 삭제
		if( $(this).next("ul").is(":visible") ){ // 보이고 있으면
			$(this).next().slideUp(); // 슬라이드 올려서 닫음
		}else{
			$(this).closest(".sidebar h3").addClass("active"); // 아니면 클래스 생성
			$(this).next().slideDown() // 슬라이드 내려서 보여줌
		};
	});
});	
</script>

active 클래스는 현재 열린 모듈 표시로 펼쳐진 모듈에 색을다르게 한다던지는 시각적 효과를 주기 위함이고 중요한 부분은 아닙니다. 

$(“.sidebar_element ul:visible”).slideUp(); 이 분분에 중요합니다. 다른 모듈을 선택해서 펼쳤을 때 다른 열린 모듈은 닫아주는 기능인데 $(“.sidebar ul:visible”).slideUp(); 이런 식으로 포괄적으로 지정해주면 카테고리 하위 ‘ul’ 접힌 후 펼쳐지지 않기 때문에 모듈의 클래스 명을 적어주어야 정상적인 기능을 합니다. 개별 클래스명만 있다면 모듈 클래스 명도 추가해야 가능할듯합니다.

.sidebar h3 .sub_plus {
	position: absolute;
	top: 10px;
	right: 15px;
	line-height: 19px;
	-webkit-transition: transform .3s linear;
	-moz-transition: transform .3s linear;
	-ms-transition: transform .3s linear;
	-o-transition: transform .3s linear;
  transform: transform .3s linear;
  
}
.sidebar h3.active .sub_plus { 
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg)
}

사이드바 제목을 클릭했을때 제이쿼리로 생성된 ‘+’ 기호를 뒤틀어 ‘x’ 효과를 주는 CSS 속성들 입니다.

<script type="text/javascript">
$(document).ready(function() {
	$(".sidebar h3").click(function(){ // 모듈 제목 H3 클릭하면
		if( $(this).next("ul").is(":visible") ){ // 보이고 있으면
			$(this).next().slideUp(); // 슬라이드 올려서 닫음
		}else{
			$(this).next().slideDown() // 슬라이드 내려서 보여줌
		};
	});
});	
</script>

위 처럼 간단한 소스에 CSS 편집에서 .sidebar ul { display: none } 추가만으로도 충분이 사용가능 합니다.

HTML이나 CSS 편집을 직접 조금이라도 해보셨다면 쉽게 적용가능하실겁니다.