블로그에 탭메뉴 사용하기

demun
퍼블리셔/jQuery
2012. 6. 10. 06:00

이전에 자바스크립트로 블로그에서 사용하는 글을 적은 적이 있습니다.
이번에는 jquery 를 사용하는 방법입니다.
이번글을 쓰면서 이전글을 다시 돌아보는 계기가 됐군요.

예전글
블로그에서 탭메뉴 이용하기 => http://demun.tistory.com/1696

오늘은 jquery 를 이용하는 방법입니다.
수많은 방법이 있지만 아주 간단하고 딱 탭에만 맞추어서 사용하는 코드를 골랐습니다.
예제코드는 jquery Cookbook 에서 골라왔습니다.
예제화면 보기

위의 코드는 border 을 사용하고 탭에 이미지를 하나 사용합니다.
저는 여기서 좀더 수정하여 이미지를 사용하지 않고 border 도 사용하지 않았습니다.
그래서 어떤 배경에도 어울리도록 했고, 이미지가 없기 때문에 경로에 대한 오류도 없습니다.

더군다나 하단에 나만의 추천글이나 링크를 추가할수도 있습니다.
저의 경우는 추천글, 태그, 댓글, 트랙백, 라이브리댓글 이렇게 5가지를 하나로 묶어 보았습니다. 에제 화면을 보겠습니다.

사용하는 방법.

먼저 블로그에서 라이브리 댓글 플러그인을 사용한다면 jquery 를 로드하는 아래의 코드는 필요없습니다.
만약 사용하지 않는다면 아래의 코드가 필요합니다.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

jquery 를 사용하거나 라이브리 댓글을 사용한다면 아래의 코드를 </body> 위에 아래의 코드를 넣어주세요.
만약 그렇지 않다면 위의 코드 한줄도 포함해서 넣어주세요.

<script type="text/javascript">
	// 탭.
	function init_tabs() {
		$(".tab_content").css("display","none");
		if (!$('ul.tabs').length) { return; }
		$('div.tab_content_wrap').each(function() {
			$(this).find('div.tab_content:first').show();
		});
		$('ul.tabs a').click(function() {
			if (!$(this).hasClass('current')) {
				$(this).addClass('current').parent('li').siblings('li').find('a.current').removeClass('current');
				$($(this).attr('href')).show("1000").siblings('div.tab_content').hide("1000");
			}
			this.blur();
			return false;
		});
	}
	$(document).ready(function() {
		init_tabs();
	});
</script>

자 이제 아래의 html 코드를 서식으로 지정해서 사용하면 편합니다.
글쓸때 본문에 사용해도 되고, 스킨편집에서 본문치환자 아래에 넣어서 사용해도 됩니다.
여기서는 일단 본문에서 사용한다고 가정하고 진행합니다.
글쓰기창 우측에 html 에 체크를 하고 아래의 코드를 넣어주세요.

<!-- 탭시작 -->
<div class="tab-wrap">
	<ul class="tabs">
		<li>
			<a href="#tab_content_primary_01">Tab 1</a>
		</li>
		<li>
			<a href="#tab_content_primary_02">Tab 2 </a>
		</li>
		<li>
			<a href="#tab_content_primary_03">Tab 3</a>
		</li>
		<li>
			<a href="#tab_content_primary_04">Tab 4</a>
		</li>
		<li>
			<a href="#tab_content_primary_05">Tab 5</a>
		</li>
	</ul>
	<div class="tab_content_wrap">
		<div id="tab_content_primary_01" class="tab_content">
			<p>
				<strong>Content Area 01</strong>
			</p>
			<ul>
				<li><a href="#" title="">링크 1</a></li>
				<li><a href="#" title="">링크 2</a></li>
				<li><a href="#" title="">링크 3</a></li>
				<li><a href="#" title="">링크 4</a></li>
			</ul>
		</div>
		<div id="tab_content_primary_02" class="tab_content">
			<p>
				<strong>Content Area 02</strong>
			</p>
			<p>
				Tab Link 02 의 내용.<br /><br />
			</p>
		</div>
		<div id="tab_content_primary_03" class="tab_content">
			<p>
				<strong>Content Area 03</strong>
			</p>
			<p>
				Tab Link 03 의 내용.<br /><br />
			</p>
		</div>
		<div id="tab_content_primary_04" class="tab_content">
			<p>
				<strong>Content Area 04</strong>
			</p>
			<p>
				Tab Link 04 의 내용.<br /><br />
			</p>
		</div>
		<div id="tab_content_primary_05" class="tab_content">
			<p>
				<strong>Content Area 05</strong>
			</p>
			<p>
				Tab Link 05 의 내용. <br /><br />
			</p>
		</div>
	</div><!-- //tab_content_wrap -->
</div><!-- //tab-wrap -->
<!-- // 탭끝 -->

그 다음 스킨편집에서 css 맨아래에 아래의 코드를 넣어줍니다.

.tab-wrap { position:relative; padding:0; margin:2em 0 0; background-color:#fff; border-style:solid; border-width:1px; border-color:#E1E1E1 #D4D4D4 #D4D4D4; border-radius:5px; box-shadow:0 1px 3px rgba(0, 0, 0, 0.15); }
.tabs { overflow: hidden; }
.tabs li, .tabs a { -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.tabs li { background: #fff; display: inline; float: left; list-style: none; margin: 0; padding: 1px 1px 0; text-align: center; width: 137px; }
.tabs a { color: #333; display: block; padding: 5px 0; text-decoration: none; background-color:#ccc; }
.tabs a.current { background-color: #06f; color: #fff; }
.tabs a:hover { background: #666; color: #fff; }
* html .tabs a, * html #tab_content_primary_01 a { height: 1%; } /* For IE6. */
.tab_content_wrap { position:relative; width:678px; padding:10px; background-color: #fff; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
#tab_content_primary_01 a { padding:0 0 0 15px; display:inline-block; background:url(images/list-dot.png) no-repeat 0 8px; }
#tab_content_primary_01 a:hover { color:#06f; text-decoration:underline; }

여기서 중요한 것은 위코드 중에서 너비에 관련한 곳입니다. 참고해서 보세요.

.tabs li {  
	width: 137px; /* 현재는 탭이 137px 짜리 5개가 있습니다. */
}
.tab_content_wrap { 
	width:678px; /* 본문너비보다 작게 해야 합니다. 저는 680px 입니다. */
}

위 부분은 본인의 블로그 스킨마다 다를수 있으니 너비조정을 통해서 깨지지 않도록 해야합니다.
또 한가지 저의 경우 #tab_content_primary_01 a 에 리스트 목록에 블릿이미지를 사용하였습니다.
그래서 아래와 같은 코드가 들어갔습니다.

#tab_content_primary_01 a { 
	padding:0 0 0 15px; 
	display:inline-block; 
	background:url(images/list-dot.png) no-repeat 0 8px; 
}

위 코드 그대로 사용하려면 아래 이미지를 스킨편집에서 업로드 하세요.

만약 이미지를 사용하지 않으려면 위코드와 이미지를 사용하지 않으면 됩니다.
즉 확인과정을 반드시 거치기 바랍니다.

개 개

demun(대문블로그)

블로그에 탭메뉴 사용하기

티스토리툴바