티스토리 블로그메뉴를 드롭다운으로 이용하는 방법

demun
티스토리스킨수정/메인메뉴
2012. 8. 4. 06:00

제가 스킨을 제작하면서 조금 불만아닌 불만인 점이 블로그 메뉴와 카테고리 메뉴 입니다.
티스토리는 치환자라는 개념이 있어서 html 을 업로드하면 서버에서 치환자가 html 로 변환되어서 보여집니다.
이 부분에서 불필요하게 추가되는 부분이 있습니다.

그래서 기존과는 조금 다른 마크업이 되어서 사용하는데 어려움이 없지않아 좀 있습니다.
이 부분을 해결해보고자 합니다.

평소 블로그메뉴는 홈, 태그로그, 미디어로그, 지역로그, 방명록....등으로 나뉘고, 추가적으로 공지사항이나 관리자, 글쓰기 등을 만들기도 합니다.
근데 문제는 홈이나 방명록을 제외하고는 거의 사용하지 않습니다.
추가적으로 만드는 관리자나 글쓰기등은 그래도 종종 사용합니다.

그래서 제가 생각한것은 블로그 메뉴라고 하고 그 하위로 모든 메뉴가 펼쳐지는 것입니다.
사실 홈은 블로그 로고를 클릭하면 홈으로 이동합니다. 이것도 블로그메뉴에서는 그닥 많이 사용되지는 않습니다.
하지만 많은 스킨들이 이 부분을 그냥 메인 네비게이션으로 사용합니다.

불필요한 부분이 사용된다고 할 수 있죠.
이 블로그 메뉴에 해당하는 치환자를 스킨에 포함해서 업로드하고 그걸 그대로 사용하되 드롭다운으로 사용하는 방법을 알려드립니다.

블로그 메뉴의 마크업은 아래와 같습니다.

html - blogmenu

<div class="blogMenu">
	[#\#_blog_menu_##]
</div>

이것을 저는 이렇게 수정했습니다.

html

<ul class="blogMenu">
	<li>BlogMenu <span class="subIcon"></span>
		[#\#_blog_menu_##]
	</li>
</ul>

여하는 여기서 변경된 점은 그리 중요하지 않습니다.
div 를 사용하나 ul 을 사용하나 거기서 거기죠.

일단 ul 을 사용했다고 가정하고 진행합니다.
이걸 스킨편집에서 html 에 넣고 저장을 하면 브라우져에서는 대략 아래처럼 보여집니다.

즉 span 다음에 ul 로 시작하는 부분이 치환자가 변형되어서 보여지는 부분입니다.
드롭다운 메뉴가 어떻게 보여지는지 아래에서 제가 배포하는 html 에 어떤 부분이 포함되어 있는지 한번 동영상으로 확인하시기 바랍니다.

코드는 아래와 같습니다. 내용이 길어 더보기를 사용합니다.

html

<!DOCTYPE html>
<html>
<head>
<title>Tisgory Blog Menu</title>
<style>
body{
  font-size:0.85em;
  font-family:나눔고딕,Verdana, Arial, Helvetica, sans-serif;
}

#blogMenuNav, #blogMenuNav ul{
  margin:0;
  padding:0;
  list-style-type:none;
  list-style-position:outside;
  position:relative;
  line-height:1.5em; 
}
#blogMenuNav > li {
	display:block;
	padding:10px;  
	text-decoration:none;
	cursor: pointer;
	color:#111;
	text-shadow: 1px 1px #999;
	filter: dropshadow(color=#999999, offx=0, offy=1);
	background: #aaaaaa; /* Old browsers */
	background: -moz-linear-gradient(top,  #aaaaaa 0%, #555555 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaaaaa), color-stop(100%,#555555)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #aaaaaa 0%,#555555 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #aaaaaa 0%,#555555 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #aaaaaa 0%,#555555 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #aaaaaa 0%,#555555 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#555555',GradientType=0 ); /* IE6-9 */
	border-radius: 5px;
}
#blogMenuNav a {
	display:block;
	padding:10px;  
	text-decoration:none;
	color:#111;
	text-shadow: 1px 1px #999;
	filter: dropshadow(color=#999999, offx=0, offy=1);
	background: #aaaaaa; /* Old browsers */
	background: -moz-linear-gradient(top,  #aaaaaa 0%, #555555 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaaaaa), color-stop(100%,#555555)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #aaaaaa 0%,#555555 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #aaaaaa 0%,#555555 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #aaaaaa 0%,#555555 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #aaaaaa 0%,#555555 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#555555',GradientType=0 ); /* IE6-9 */
}
#blogMenuNav a:hover {
	background: #888888; /* Old browsers */
	background: -moz-linear-gradient(top,  #888888 0%, #3a3a3a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#888888), color-stop(100%,#3a3a3a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #888888 0%,#3a3a3a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #888888 0%,#3a3a3a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #888888 0%,#3a3a3a 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #888888 0%,#3a3a3a 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#3a3a3a',GradientType=0 ); /* IE6-9 */
}
#blogMenuNav a .c_cnt {
	display: inline-block;
	text-indent: -9999px;
}

#blogMenuNav li{
  float:left;
  position:relative;
}
#blogMenuNav ul {
  position:absolute;
  display:none;
  width:12em;
  top:40px;
	left:0;
}
#blogMenuNav li ul a{
  width:10em;
  height:auto;
  float:left;
}
#blogMenuNav ul ul{
  top:auto;
}	
#blogMenuNav li ul ul {
  left:10em;
  margin:0px 0 0 10px;
}
#blogMenuNav li:hover ul ul, #blogMenuNav li:hover ul ul ul, #blogMenuNav li:hover ul ul ul ul{
  display:none;
}
#blogMenuNav li:hover ul, #blogMenuNav li li:hover ul, #blogMenuNav li li li:hover ul, #blogMenuNav li li li li:hover ul{
  display:block;
}
.subIcon {
	display:inline-block;
	width: 15px;
	height: 15px;
	vertical-align: middle;
	background:url(down.png) no-repeat;
}
#blogMenuNav > li a {
	border-right:1px solid #666;
	border-left:1px solid #aaa;
}
#blogMenuNav > li:first-child > a {
	border-radius: 5px 0 0 5px;
}
#blogMenuNav > li:last-child > a {
	border-radius: 0 5px 5px 0;
}
#blogMenuNav ul li:first-child a {
	border-radius: 5px 5px 0 0;
}
#blogMenuNav ul li:last-child a {
	border-radius: 0 0 5px 5px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<h1>Tistory BlogMenu Dropdown</h1>

<ul class="blogMenu">
	<li>BlogMenu <span class="subIcon"></span>
		<!-- [#\#_blog_menu_##] -->
		<!-- 티스토리의 경우 여기서부터 주석처리됩니다. -->
		<ul>
			<li class="t_menu_home first">
				<a href="/">홈</a>
			</li>
			<li class="t_menu_tag">
				<a href="/tag">태그</a>
			</li>
			<li class="t_menu_medialog">
				<a href="/media">미디어로그</a>
			</li>
			<li class="t_menu_location">
				<a href="/location">위치로그</a>
			</li>
			<li class="t_menu_guestbook">
				<a href="/guestbook">방명록</a>
			</li>
			<li class="t_menu_admin">
				<a href="/admin">관리자</a>
			</li>
			<li class="t_menu_write last">
				<a href="/gateway/entry/post">글쓰기</a>
			</li>
		</ul>
		<!-- //여기까지 주석처리 -->
	</li>
</ul>
<script>
(function($) {
	$('.blogMenu').attr('id','blogMenuNav');
	$("#blogMenuNav ul").css('display','none'); 
	$('li').has('ul').children('a').append('<span class="subIcon"></span>');
	$("#blogMenuNav li").hover(function(){
			$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(200);
		},function(){
			$(this).find('ul:first').css({visibility: "hidden"});
		});
})(jQuery);
</script>
</body>
</html>

하위메뉴를 표시하기 위해 이미지하나가 포함되어 있습니다.
예제에서는 html 과 같이 이미지를 두고 떠블클릭해서 브라우져로 열어보시면 됩니다.

blogMenu.html