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

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

그래서 ‘이번에도 안되면 포기’라는 심정으로 mulder21c_dot_whity v 2.0 스킨의 Source들¹을 찬찬히 까봤는데, 아래의 코드가 눈에 들어오는 것이 아닌가.

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>

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

현재 나름 만족 중이다.

1. html 및 js 파일들