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

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

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

 

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

 

<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 편집을 직접 조금이라도 해보셨다면 쉽게 적용가능하실겁니다.

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤