티스토리 카테고리 메뉴를 드롭다운으로 이용하는 방법

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

이전글에 티스토리의 블로그 메뉴를 드롭다운으로 이용하는 방법을 알아보았습니다.
사실 이 부분도 같이 해결을 할려고 같이 제가 제작한 부분입니다.

티스토리 치환자 카테고리 알아보기.
우선 카테고리 부분을 좀 알아보겠습니다.

티스토리에서 카테고리 치환자는 두가지 형태입니다.
하나는 접고 펼수 있는 형태와 목록이 쭉 펼쳐지는 리스트 형태가 존재합니다.

접고 펴는 형식의 카테고리

<div id="categoryMenu">
	[#\#_category_##]
</div>

리스트 형식의 카테고리

<div id="categoryMenu">
	[#\#_category_list_##]
</div>

이렇게 치환자가 다릅니다.
카테고리가 길 경우에는 접고 펴는 형식이 사용하기에는 좋지만 디자인적으로 별로 좋지 않고, 수정이 어려운 점 때문에 저는 접고 펴는 형식은 잘 안씁니다.

제가 하는 방법은 리스트 형식의 카테고리를 사용합니다.

목표.
카테고리를 메인메뉴에서 사용함.
제일 먼저 나오는 "분류 전체보기" 는 사용할 필요가 없어 안보이게 합니다.
두번째 부터 나오는 카테고리 메뉴를 메인메뉴로 사용합니다.
하위 메뉴가 있는것은 드롭다운 메뉴로 보여집니다.

이런 부분을 적용한 부분을 동영상으로 참고하시기 바랍니다.

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

티스토리 카테고리

<!DOCTYPE html>
<html>
<head>
<title>Tisgory Catogory Menu</title>
<style>
body{
  font-size:0.85em;
  font-family:나눔고딕,Verdana, Arial, Helvetica, sans-serif;
}
#categoryMenu > ul {
	margin: 0;
	list-style: none;
}
#categoryMenu > ul > li > a {
	display:none;
}
#navMenu, #navMenu ul{
  margin:0;
  padding:0;
  list-style-type:none;
  list-style-position:outside;
  position:relative;
  line-height:1.5em; 
}
#navMenu 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 */
}
#navMenu 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 */
}
#navMenu a .c_cnt {
	display: inline-block;
	text-indent: -9999px;
}
#navMenu li{
  float:left;
  position:relative;
}
#navMenu ul {
  position:absolute;
  display:none;
  width:12em;
  top:40px;
}
#navMenu li ul a{
  width:10em;
  height:auto;
  float:left;
}
#navMenu ul ul{
  top:auto;
}	
#navMenu li ul ul {
  left:10em;
  margin:0px 0 0 10px;
}
#navMenu li:hover ul ul, #navMenu li:hover ul ul ul, #navMenu li:hover ul ul ul ul{
  display:none;
}
#navMenu li:hover ul, #navMenu li li:hover ul, #navMenu li li li:hover ul, #navMenu 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;
}
#navMenu > li a {
	border-right:1px solid #666;
	border-left:1px solid #aaa;
}
#navMenu > li:first-child > a {
	border-radius: 5px 0 0 5px;
}
#navMenu > li:last-child > a {
	border-radius: 0 5px 5px 0;
}
#navMenu ul li:first-child a {
	border-radius: 5px 5px 0 0;
}
#navMenu ul li:last-child a {
	border-radius: 0 0 5px 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Tisgory Catogory</h1>

<div id="categoryMenu">
<!-- [#\#_category_list_##] --> 
<!-- 티스토리의 경우 여기서부터 주석처리됩니다. -->
<ul>
  <li>
    <a href="/category">분류 전체보기 <span class="c_cnt">(52)</span></a>
    <ul>
      <li>
        <a href="/category/배포">배포 <span class="c_cnt">(8)</span></a>
        <ul>
          <li>
            <a href="/category/배포/스킨">스킨 <span class="c_cnt">(5)</span></a>
          </li>
          <li>
            <a href="/category/배포/초대장">초대장 <span class="c_cnt">(1)</span></a>
          </li>
          <li>
            <a href="/category/배포/버튼">버튼 <span class="c_cnt">(1)</span></a>
          </li>
          <li>
            <a href="/category/배포/리소스">리소스 <span class="c_cnt">(1)</span></a>
          </li>
        </ul>
      </li>
      <li>
        <a href="/category/스킨수정">스킨수정 <span class="c_cnt">(3)</span></a>
        <ul>
          <li>
            <a href="/category/스킨수정/header">header <span class="c_cnt">(2)</span></a>
          </li>
          <li>
            <a href="/category/스킨수정/content">content <span class="c_cnt">(0)</span></a>
          </li>
          <li>
            <a href="/category/스킨수정/sidebar">sidebar <span class="c_cnt">(0)</span></a>
          </li>
          <li>
            <a href="/category/스킨수정/레이아웃변경">레이아웃변경 <span class="c_cnt">(0)</span></a>
          </li>
          <li>
            <a href="/category/스킨수정/기타">기타 <span class="c_cnt">(1)</span></a>
          </li>
        </ul>
      </li>
      <li>
        <a href="/category/제작">제작 <span class="c_cnt">(25)</span></a>
        <ul>
          <li>
            <a href="/category/제작/필수지식">필수지식 <span class="c_cnt">(3)</span></a>
          </li>
          <li>
            <a href="/category/제작/레이아웃기법">레이아웃기법 <span class="c_cnt">(1)</span></a>
          </li>
          <li>
            <a href="/category/제작/노하우">노하우 <span class="c_cnt">(7)</span></a>
          </li>
          <li>
            <a href="/category/제작/따라하기">따라하기 <span class="c_cnt">(0)</span></a>
          </li>
          <li>
            <a href="/category/제작/티스토리치환자">티스토리치환자 <span class="c_cnt">(14)</span></a>
          </li>
        </ul>
      </li>
      <li>
        <a href="/category/스킨이야기">스킨이야기 <span class="c_cnt">(10)</span></a>
        <ul>
          <li>
            <a href="/category/스킨이야기/서식">서식 <span class="c_cnt">(2)</span></a>
          </li>
          <li>
            <a href="/category/스킨이야기/활용">활용 <span class="c_cnt">(8)</span></a>
          </li>
        </ul>
      </li>
      <li>
        <a href="/category/HTML/XHTML">HTML/XHTML <span class="c_cnt">(2)</span></a>
      </li>
      <li>
        <a href="/category/CSS">CSS <span class="c_cnt">(2)</span></a>
      </li>
      <li>
        <a href="/category/HTML5">HTML5 <span class="c_cnt">(0)</span></a>
      </li>
      <li>
        <a href="/category/CSS3">CSS3 <span class="c_cnt">(1)</span></a>
      </li>
      <li>
        <a href="/category/작성중">작성중 <span class="c_cnt">(1)</span></a>
      </li>
    </ul>
  </li>
</ul>
<!-- //여기까지 주석처리 -->
</div>
<script>
(function($) {
	$('#categoryMenu > ul > li > ul').attr('id','navMenu');
	$("#navMenu ul").css('display','none'); 
	$('li').has('ul').children('a').append('<span class="subIcon"></span>');
	$("#navMenu 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>

이미지가 하나 포함되어 있습니다.
category.html 과 같이 옆에 두고 떠블클릭해서 브라우져로 열어보면 동영상과 같이 보일겁니다.

category.html