메인메뉴 변경하는 법

게시자: 대문 demun 카테고리: 티스토리스킨수정/메인메뉴 2012.04.08 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 자식요소를 모두 삭제하고 한단계만 사용하는 겁니다.

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


신고

댓글

  1. 2012.04.08 18:17  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. 2012.04.08 18:18  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 대문 demun 2012.04.08 20:05 신고  댓글주소  수정/삭제

      한가지 더 수정해야 할 부분이 보이네요.
      메뉴밑으로 상당이 많은 공백이 보입니다.
      그건 css 설정에서 #container 를 찾아서 height: 100%; 값을 삭제하세요.

  3. 2012.04.08 18:28 신고 BlogIcon 람보트  댓글주소  수정/삭제  댓글쓰기

    아! 그리고 하나 더 문의 드립니다. ^^;;
    허종문님이 말씀하신대로 헤드 부분 위에 변경사항을 넣었더니
    상단에 있던 회사 이미지가 없어졌는데요~ 그거 다시 살리려면 어떻게 해야하나요?

  4. 2012.04.11 09:57  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 대문 demun 2012.04.12 19:08 신고  댓글주소  수정/삭제

      현재 크롬으로봐도 메뉴가 일열로 보이네요..
      css 파일과 js 파일을 다시 업로드해보세요. 로딩이 안되서 그런것일수도 있습니다.

      한가지 아이폰으로 볼때는 현재의 스킨은 지원하지 않습니다.
      그건 html5를 사용하기 때문에 그런것이고 티스토리에서 지원하는 모바일스킨을 사용해야 합니다.

      물론 pc 번젼으로 보면 상관은 없구요...


      또하나 익스플로러 버젼마다 차이가 있을수 있습니다.
      8버젼이상부터는 아마도 정상적으로 보여야 정상이라고 생각할수 있습니다.
      우선 확인해보세요.

  5. 2012.06.07 13:02  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 대문 demun 2012.06.07 14:48 신고  댓글주소  수정/삭제

      본인이 하시는 블로그주소를 정확하게 입력해주세요.
      블로그에서 사용하시는 필명도 정확하게 입력해주시구요....

      본인의 정보는 아무것도 입력하지 않고 무작정 도와달라고 하는것은 아니라고 생각됩니다.
      입력하시고 정식으로 요청하세요.

  6. 2012.06.08 06:42  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 대문 demun 2012.06.08 13:43 신고  댓글주소  수정/삭제

      #blogMenu {
      background: url("images/menu-dia.jpg") no-repeat scroll 0 0 transparent;
      float: left;
      height: 49px;
      width: 944px;
      }

      #blogMenu li {
      float: left;
      }

      #blogMenu li a {
      color: #FFFFFF;
      float: left;
      font-family: "Trebuchet MS",Verdana,Tahoma,Sans-serif;
      font-size: 16px;
      height: 42px;
      line-height: 42px;
      margin: 0 5px 0 0;
      text-align: center;
      width: 154px;
      }

      http://cfile9.uf.tistory.com/image/1350E6434FD182D107CD8C

  7. 2012.06.09 07:41 신고 BlogIcon blvd  댓글주소  수정/삭제  댓글쓰기

    저는 서너시간을 고민했는데 갖다 붙이니 단번에 해결 되었습니다 . 감사^^


  8. 2012.06.13 08:13  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다