메인메뉴 변경하는 법

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

블로그를 통해 메인 메뉴를 변경하는 방법을 문의한 분이 있어 간단하게 말하려 했으나 워낙 양이 길어 포스팅으로 합니다.

기존의 한줄로 나오는 메뉴를 jQuery 를 사용한 megamenu 로 사용하는 방법입니다.

스킨을 변경하기전에 반드시 스킨을 저장을 하고 시작하세요. 즉 백업을 먼저 하라는 말입니다.

수정하다가 잘못되면 언제는 다시 되돌려야하니까요.

먼저 아래의 파일을 다운로드 받아 스킨편집에서 모두 업로드합니다.

jquery.megamenu.css

jquery.megamenu.js

그런다음 </head> 위에 아래의 코드를 붙여넣기 합니다.


<link rel="stylesheet" href="./images/jquery.megamenu.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="./images/jquery.megamenu.js" type="text/javascript"></script>
<script type="text/javascript">
  jQuery(function(){
	var SelfLocation = window.location.href.split('?');
	switch (SelfLocation[1]) {
	  case "justify_right":
		jQuery(".megamenu").megamenu({ 'justify':'right' });
		break;
	  case "justify_left":
	  default:
		jQuery(".megamenu").megamenu();
	}
  });
</script>

그런다음 티스토리 블로그 치환자부분을 변경합니다.

예제로 삼은 블로그의 코드를 보니 아래처럼 나옵니다.

노랑색으로 칠한 부분을 아래의 코드로 변경합니다.


<!-- 메인메뉴 시작 -->
<ul class="megamenu">
	<li>
		<a href="javascript:void(0)">홈</a>
		<div class="w200">
			<ul id="list-content">
				<li>리스트 1
					<ul>
						<li>리스트 1.1 </li>
						<li>리스트 1.2 </li>
						<li>리스트 1.3 </li>
					</ul>
				</li>
				<li>리스트 2 
					<ul>
						<li>리스트 2.1</li>
						<li>리스트 2.2</li>
					</ul>
				</li>
				<li>리스트 3
					<ul>
						<li>리스트 3.1 </li>
						<li>리스트 3.2 </li>
					</ul>
				</li>
				<li>리스트 4</li>
			</ul>
		</div>
	</li>
	<li>
		<a href="javascript:void(0)">카테고리</a>
		<div class="w200">
			<ul id="list-content">
				<li>리스트 1
					<ul>
						<li>리스트 1.1 </li>
						<li>리스트 1.2 </li>
						<li>리스트 1.3 </li>
					</ul>
				</li>
				<li>리스트 2 
					<ul>
						<li>리스트 2.1</li>
						<li>리스트 2.2</li>
					</ul>
				</li>
				<li>리스트 3
					<ul>
						<li>리스트 3.1 </li>
						<li>리스트 3.2 </li>
					</ul>
				</li>
				<li>리스트 4</li>
			</ul>
		</div>
	</li>
	<li>
		<a href="javascript:void(0)">방명록</a>
		<div class="w200">
			<ul id="list-content">
				<li>리스트 1
					<ul>
						<li>리스트 1.1 </li>
						<li>리스트 1.2 </li>
						<li>리스트 1.3 </li>
					</ul>
				</li>
				<li>리스트 2 
					<ul>
						<li>리스트 2.1</li>
						<li>리스트 2.2</li>
					</ul>
				</li>
				<li>리스트 3
					<ul>
						<li>리스트 3.1 </li>
						<li>리스트 3.2 </li>
					</ul>
				</li>
				<li>리스트 4</li>
			</ul>
		</div>
	</li>
</ul>
<!-- //메인메뉴 끝 -->

이런식으로 변경하면 됩니다.

문제는 카테고리의 글과 현재의 글과 같이 보여져야 한다는 점입니다.

아래의 블로그부분을 보겠습니다.

가장 큰 부분은 분류 전체보기이고 그 아래 블로그가 잇고 그아래 블로그팁, 블로그 광고, 티스토리 가이드.... 이런식으로 있습니다.

블로그를 클릭하면 블로그주소/category/블로그 이런식으로 나옵니다.

이 부분을 링크의 부분으로 넣어주면 됩니다.

즉 아래처럼 링크를 변경해주면 됩니다.


<!-- 변경전 -->
	<a href="javascript:void(0)">카테고리</a>
	<div class="w200">
		<ul id="list-content">
			<li>리스트 1
<!-- 변경후 -->
	<a href="javascript:void(0)">카테고리</a>
	<div class="w200">
		<ul id="list-content">
			<li><a href="블로그주소/category/블로그">블로그</a>

다른 모든 링크들도 본인이 원하는 형식으로 변경하면 됩니다.

그런 다음 적용해보고 안맞을 경우는 수정을 조금 해주면 됩니다.

현재의 메뉴가 어떤식으로 작동하는지 동영상으로 한번 보았습니다.

한가지 팁.

링크 삽입이 올바르게 되지 않은 경우에 대해서 하나더 기술합니다.

아래 이미지를 보시면 인사말 앞에 보시면 동그라미 블릿이 들어간 경우입니다.

이걸 바로 잡으려면 아래처럼 해야합니다.

리스트 1 다음에 ul 자식요소를 모두 삭제하고 한단계만 사용하는 겁니다.

위의것처럼 수정해야 합니다.

개 개

demun(대문블로그)

메인메뉴 변경하는 법

티스토리툴바