후...
으하하~~~~
기뻐하십쇼, 보름님.
오늘 하루 종일 돌아 다녀서 즐겨찾기와 똑 같은 기능을 가지는 스크립트를 구했습니다.
원본은 워낙 복잡하고 군더더기가 많은 나머지 어지럽기 때문에, 제 나름대로 소스 분석을 해서 알짜 중요 부분만을 간추려 내었습니다.
옆에 예제도 있으니 같이 보시면서 이해하세요. 예제는 멋도 없고, 여러 가지로 빈약하지만, 활용하는 것은 보름님에 달려 있다는 것을 말씀드리기 위해 핵심만 적용했습니다.
첨부된 예제의 소스를 분석하면서 기본 원리와 활용 방법을 설명해드리죠.
<html>
<head>
<title>즐겨찾기 메뉴 예제</title>
<style>
body {font-family:굴림;}
.bold { color:black; font-size: 10pt;}
a:link, a:vlink { color:blue; text-decoration:none; font-size:9pt;}
a:hover { color:red; text-decoration:none; font-size:9pt; }
</style>
</head>
<body>
<script language="JavaScript">
function clikker(a1,a2,a3,a4,a5,a6) {
if (a1.style.display =='') {
a1.style.display = 'none';
}
else {
a1.style.display='';
}
}
</script>
<center>글자를 클릭해보세요.</center>
<div>
<div align="left" id="AA"> style="cursor:hand;">
<font class="bold"> 터1 </font>
<div id="AA1" style="DISPLAY: none" onclick="window.event.cancelBubble = true;">
<A href="">초보님</A>
</div>
</div>
<div align="left" id="BB" color = "#0000FF">BB1,AA1,CC1,DD1,EE1,FF1);" style="cursor:hand;">
<font class="bold"> 터2 </font>
<div id="BB1" style="DISPLAY: none" onclick="window.event.cancelBubble = true;">
<A href="">자바스크립트 </A> <br>
<A href="">Flash</A> <br>
<A href="">CGI</A> <br>
</div>
</div>
<div align="left" id="CC" color = "#0000FF">CC1,AA1,BB1,DD1,EE1,FF1);" style="cursor:hand;">
<font class="bold"> 터3 </font>
<div id="CC1" style="DISPLAY: none" = true;">
<A href="">페인트샵</A> <br>
<A href="">포토샵</A><br>
</div>
</div>
<div align="left" id="DD" color = "#0000FF">DD1,AA1,BB1,CC1,EE1,FF1);" style="cursor:hand;">
<font class="bold"> 터4 </font>
<div id="DD1" style="DISPLAY: none" = true;">
<A href="">웹에디터</A> <br>
<A href="">MIDI</A><br>
</div>
</div>
<div align="left" id="EE" color = "#0000FF">EE1,AA1,BB1,CC1,DD1,FF1);" style="cursor:hand;">
<font class="bold"> 터5 </font>
<div id="EE1" style="DISPLAY: none" onclick="window.event.cancelBubble = true;" >
<A href="">바깥 소식</A> <br>
<A href="">이야기방</A> <br>
</div>
</div>
<div align="left" id="FF" color = "#0000FF">FF1,AA1,BB1,CC1,DD1,EE1);" style="cursor:hand;">
<font class="bold"> 터6 </font>
<div id="FF1" style="DISPLAY: none" onclick="window.event.cancelBubble = true;" >
<A href="">이쁜 방</A> <br>
</div>
</div>
</div>
</body>
</html>
위에 파란색으로 쓰여져 있는 부분이 이 소스의 핵심 부분입니다.
하나 하나씩 따져 보죠.
<script language="JavaScript">
function clikker(a1,a2,a3,a4,a5,a6) {
if (a1.style.display =='') {
a1.style.display = 'none';
}
else {
a1.style.display='';
}
}
</script>
에서
a1,a2,a3,a4,a5,a6 는 사용하시는 첫 메뉴 ( 서울대교구, 광주, 부산 등등의 첫 화면의 메뉴 )의 갯수에 따라 변동하는 것입니다. 이번 예제에서는 제가 6가지의 ( 터1~6 ) 주 메뉴를 넣었기 때문에 a1~6까지 모두 6개의 변수를 둔 것입니다. 따라서 보름님이 쓰실 주 메뉴의 개수가 8개라면 a7, a8을 추가하시면 됩니다. ( a1,a2,a3,a4,a5,a6,a7,a8 과 같이...) 개수가 적다면 삭제하시면 되구요.
*원리 : 위에는 각 변수들의 배열을 사용하였습니다. 음... 쉽게 말하자면, a1 에 해당하는 첫번째 위치의 변수명만이 위의 기능을 적용시킨다는 것입니다.
<div align="left" id="BB" color = "#0000FF">BB1,AA1,CC1,DD1,EE1,FF1);" style="cursor:hand;">
<font class="bold"> 터2 </font>
<div id="BB1" style="DISPLAY: none" onclick="window.event.cancelBubble = true;">
<A href="">자바스크립트 </A> <br>
<A href="">Flash</A> <br>
<A href="">CGI</A> <br>
</div>
</div>
<div align="left" id="CC" color = "#0000FF">CC1,AA1,BB1,DD1,EE1,FF1);" style="cursor:hand;">
<font class="bold"> 터3 </font>
<div id="CC1" style="DISPLAY: none" = true;">
<A href="">페인트샵</A> <br>
<A href="">포토샵</A><br>
</div>
</div>
이 것을 보시면 두번째 세번째의 주 메뉴에 스크립트 기능을 적용하기 위해서, onclick="clikker(AA1,BB1,CC1,DD1,EE1,FF1);" 배열의 앞 부분인 AA1 만을 바꾼 것을 볼 수 있습니다. 두번째는 BB1, 세번째는 CC1 ... 배열의 가장 앞 부분의 변수만을 참조하기 때문에 뒤에 있는 나머지 요소들은 순서가 바뀌어도 상관이 없답니다. ( 예. (AA1,EE1,CC1,DD1,FF1,BB1) <-- AA1만 참조, 바로 위의 예와 똑 같은 효과)
onclick : 마우스를 클릭했을 때,
"clikker(...);" : clikker라는 함수( 명칭은 임의로 수정할 수 있습니다. )를 부른다. 함수의 기능,효과가 적용된다.
하위 메뉴의 개수를 늘리고 싶으시다면
<A href="">페인트샵</A> <br>
<A href="">포토샵</A><br>
:
:
:
계속 늘리시면 됩니다.
지금 당장 수정해서 써보세요. <a href=""><img src=""></a> 같이 이미지로 꾸밀 수도 있으니깐요.
좋은 결과 있길 바라겠습니다. 이해 안되시면 또 물어보세요. *^^*
첨부파일: slidemenu.html(3K)