Skip to content

JavaScript를 사용하여 link 목록 간소화

JavaScript에는 완전히 잼병이라 JavaScript를 이용해서 메뉴를 간소화시킨 블로그를 방문할 때면, 많이 부럽다는 생각을 해왔다. 그러다가 멀더끙님이 mulder21c_dot_whity v 2.0이란 Textcube용 스킨을 만드신 것을 알게 되었고, 이 스킨에서 앞서 언급했던 JavaScript를 활용한 메뉴 간소화 기능도 있는걸 발견했다. 바로 아래 이미지에 나온 기능 말이다.

사용자 삽입 이미지
클릭 전


그래서 '이번에도 안되면 포기'라는 심정으로 mulder21c_dot_whity v 2.0 스킨의 Source들([{html 및 js 파일들}])을 찬찬히 까봤는데, 아래의 코드가 눈에 들어오는 것이 아닌가.

function showHide(argElementId){
var el = document.getElementById(argElementId);
if (el.style.display != 'none') {
el.style.display = 'none';
} else {
el.style.display = 'block';
}
}

그래서 바로 이 블로그에 적용시켰는데, 우선 skin.html 파일의 </head> 위 적당한 곳에 아래의 JavaScript 함수를 추가했다.

<!-- Show & Hide script begins -->
<script type="text/javascript">
//<!--[CDATA[
function showHide(argElementId){
var el = document.getElementById(argElementId);
if (el.style.display != 'none') {
el.style.display = 'none';
} else {
el.style.display = 'block';
}
}
//]]-->
</script>
<!-- Show & Hide script ends -->

그런 후에 skin.html 파일 내 'link' 메뉴 부분에서

<span style="font-weight: bold; cursor: pointer; cursor: hand;" 
onclick="showHide('submenu1');">Fun & Humor</span>
<div id="submenu1" style="display: none;">
<ul>
<li><a href="http://marineblues.net/">marineblues</a></li>
</ul>
</div>

와 같이 적용시켯다. 참고로, 누구에게 설명해주기 이전에 본인이 잊어먹지 않기 위해 위 코드를 대충 짚어보면,

<span 어쩌구저쩌구 onclick="showHide('id 구분자');">링크 구분</span>
<div id="id 구분자" style="display: none;">
<ul>
<li><a href="서브 링크 URL">서브 링크</a></li>
</ul>
</div>

와 같은 형식이 되는데, 이 형식대로 나머지 링크들에도 적용시켰다. 그래서 아래처럼 바뀌었다.

사용자 삽입 이미지
링크 구분 클릭 전


현재 나름 만족 중이다.

2 thoughts on “JavaScript를 사용하여 link 목록 간소화

    1. 其仁

      네, 저도 어디서 본 적은 있는데, 기억이 잘 안나더라구요. 그러던 차에 JavaScript 함수로 적용하는걸 봐서 개발새발 적용했답니다. 그래도 보기 좋은것 같아 개인적으로 기분은 좋습니다. s(^-^)V

      Reply

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

This site uses Akismet to reduce spam. Learn how your comment data is processed.