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

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

제 블로그는 메인메뉴에 dynamic drive의 Any 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> 부분은 일부러 삭제하지 않았습니다. 어짜피 화면에 출력되지 않도록 되어있으니까요.

---

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

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