티스토리 링크의 팝업메뉴 구현 방법

사용자 삽입 이미지

화면을 복잡하게 차지했던 링크를 팝업으로 몰아넣었습니다!


제 블로그는 메인메뉴에 dynamic driveAny Link CSS Menu를 적용했습니다.
이 글에서는 Any Link CSS Menu(이하 Anylink)를 적용한 상태에서 티스토리의 링크Anylink로 보내는 방법을 설명하겠습니다.

그리고, 이 과정에서 LoveBe.Net에서 참고한 링크 이쁘게 만들기 무공을 함께 포함시켰습니다.



1. Anylink의 기본 구성 및 링크 추가 개념

Anylink는 기본적으로 아래와 같은 코드를 삽입해서 메뉴를 구성합니다.
<li class="menu_write">
<a href="/category/일상생활들" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">
<span class="text_cat">일상▼</span></a></li>
<div id="anylinkmenu1" class="anylinkcss" style="width:80px;">
<a href="/category/일상생활들/먹거리">먹거리</a>
<a href="/category/일상생활들/신변잡기">신변잡기</a>
위에서 볼 수 있듯이 각 메뉴는 고유의 id로 구분해야 합니다.
(anylinkmenu1딱 하나만 존재합니다)
따라서, 링크 메뉴를 하나 만든 뒤에 여기에 동적으로 추가하도록 자바스크립트를 구현하면 되는 것입니다.


2. 수정 1단계 : 링크 메뉴를 위한 빈 메뉴 만들기

<li class="menu_write">
<a href="#" onMouseover="dropdownmenu(this, event, 'mylinks')">
<span class="text_move">Links▼</span></a></li>
<div id="mylinks" class="anylinkcss" style="width:220px;">
</div>
1번에서 볼 수 있는 메뉴와 거의 같은 모양의 메뉴를 만들어줍니다.
단, 여기서는 메뉴는 제목만 존재하고 내용은 텅 비어있습니다.
(div "mylinks"가 텅 비어있는 것을 볼 수 있죠?)


3. 수정 2단계 : 빈 메뉴에 내용을 추가하는 javascript 함수 삽입

<script type="text/javascript">
function appendlink(linkstr, taglink) {
   var linkes = document.getElementById('mylinks');
   var str = "<a href=\"" + taglink +"\" onclick=\"window.open(this.href); return false\">";
str += linkstr.replace(/^\[(...)]/, '<img src="./images/bnl_ico_$1.gif">');
str += "</a>";
   linkes.innerHTML += str;
}
</script>
</head>
여기서 치환자를 적용한 것을 볼 수 있습니다.
이 치환자는 링크가 [???] 즉, []로 둘러쌓인 3글자인 경우 이 부분을 bnl_ico_???.gif로 바꿔주는 치환자입니다.
즉, [1qa] QAOS 인 경우 맨 앞의 [1qa]를 이미지 bnl_ico_1qa.gif로 바꿔서 링크에 이미지를 추가하는 코드입니다.
(var str = … 을 포함한 3줄을 1줄에 적는 편이 좋습니다. 여기서는 화면에 다 표시될 수 있도록 3줄에 나눈 것입니다)

※ 이 치환자는 LoveBe.Net에서 참고한 내용을 최적화하면서 추가한 내용입니다. Juno님께 다시 한 번 감사드립니다.


4. 스킨의 링크 부분을 적절히 변경

skin.html 파일의 링크 모듈은 원래 아래와 같이 구성되어 있습니다.
<s_sidebar_element>
<!-- 링크 모듈 -->
  <div class="module module_link">
  <h3>My Link</h3>
  <ul class="contents">
<s_link_rep><li>
  <a href="[#\#_link_url_#\#]" onclick="window.open(this.href); return false">[#\#_link_site_#\#].</a>
  </li></s_link_rep></ul></div>
</s_sidebar_element>
이 모듈을 일단 보이지 않도록 style="display:none;"을 추가합니다.
그리고, 위에서 만든 appendlink 함수를 호출할 수 있도록 수정합니다.

수정한 코드는 아래와 같습니다.
<s_sidebar_element>
<!-- 링크 모듈 -->
  <div class="module module_link" style="display:none;">
  <h3>My Link</h3>
  <ul class="contents">
<s_link_rep>
<script type="text/javascript">
appendlink("[#\#_link_site_#\#]","[#\#_link_url_#\#]");
</script>
<li>
  <a href="[#\#_link_url_#\#]" onclick="window.open(this.href); return false">[#\#_link_site_#\#].</a>
  </li></s_link_rep></ul></div>
</s_sidebar_element>
이 코드에서 <li>~</li> 부분은 일부러 삭제하지 않았습니다. 어짜피 화면에 출력되지 않도록 되어있으니까요.



여기까지가 작업의 끝입니다.
이렇게 해놓으면 제 블로그에서 볼 수 있는 것과 같이 링크가 팝업으로 출력됩니다.

참, 관리메뉴→스킨→사이드바 설정에서 링크사이드바에 추가해야 합니다.
사이드바에 링크 모듈이 추가되어있지 않으면 아예 동작하지 않습니다.



  
Trackback 0 Comment 10
  1. 2008.05.16 11:09 address edit & delete reply

    비밀댓글입니다

  2. Favicon of http://pennyway.net BlogIcon 페니웨이™ 2008.05.16 14:36 address edit & delete reply

    아.. 복잡해요~ 왠지 스킨작업은 BluenLive님께 부탁드려야 할것 같은... ㅡㅡ;;

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.05.16 14:38 address edit & delete

      저의 1단 스킨을 그대로 쓰시겠다면 도와드리겠습니다.

  3. Juno 2008.05.18 19:22 address edit & delete reply

    내공이 저 보다 더 좋으신듯..^^;;
    훔쳐가야겠습니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.05.18 19:24 address edit & delete

      예쁘게 꾸미시기 바랍니다.
      덧. 블로그 주소도 가르쳐주시면 더 좋을 것 같습니다.

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.05.18 19:27 address edit & delete

      죄송합니다. LoveBe.Net 블로그의 Juno 님이셨군요.
      미친소를 먹지도 않았는데, 깜박하는군요.

  4. Favicon of http://zasfe.com BlogIcon zasfe 2008.05.19 15:46 address edit & delete reply

    정말 대단하시네요.. ㅠㅠ
    저는 벌써 1주일째 소스파악중입니다. ㅠㅠ

    혹시 1단 소스 공개하실 생각은 없으세요.?

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2008.05.19 15:49 address edit & delete

      소스는 걍 skin.html과 style.css를 다운받으시면…

      좀 더 일반적인 버전으로 뜯어고쳐 공개할 생각이 약간 있었는데, 메뉴를 자체적으로 만든 것이 아니다보니 그럴 수는 없을 것 같습니다.

      원하신다면 제 스킨파일과 이미지 파일을 보내드릴 수는 있습니다.
      (물론, 저에게 맞게 커스터마이즈되어 있으니 지우실 것들이 꽤 있을 겁니다)

  5. Favicon of http://inks.tistory.com BlogIcon inks 2009.05.15 16:49 address edit & delete reply

    안녕하세요 사이드바가 없는 블로그에서 상단 메뉴로 링크를 적용시키고 싶은데
    참 좋은 팁인것 같아서 해보려니 Any Link CSS Menu를 적용하기가 쉽지가 않네요
    괜찮으시다면 적용법좀 알려주십사 해서 글남겨봅니다. 이런부탁 초면에 죄송합니다 ^^;

    • Favicon of http://zockr.tistory.com BlogIcon BLUEnLIVE 2009.05.15 17:32 address edit & delete

      그저 열심히 해보시란 말씀 밖에... ^^;