두번째로 쓰는 글입니다^^;;

이번에는 클릭하면 메뉴가 좌르륵 뜨는 소스에 대해 알려드리겠습니다.

중복 글이라면 코멘트로 남겨 주시고요~^^

일단 기본적으로 아래의 소스를 웹문서에 삽입해 줍니다. 삽입해주지 않으면 스크립트 오류가 떠요~^^

--------------------------------------------
<script language="JavaScript">
ok=0; old_what="non";
function show(what){
  if((old_what != "non") && (what != old_what)){
ok=1;
old_what.style.display="none";
what.style.display="";
  }else
  {
if(ok){
  ok=0;
  what.style.display="none";
}else
{
  ok=1;
  what.style.display="";
}
  }
  old_what=what;
}
</script>
-----------------------------------------------

이 소스에 대해서는 굳이 설명이 필요없을 것 같군요. 그냥 삽입해주시면 됩니다^^

그리고 다음에

------------------------------------------------------

<!--메뉴를 출력시키고자 하는 문자나 이미지를 넣는 곳-->

<A href="Javascript:show(menu)"><b>출력할 메뉴의 이름</b></a></FONT>
</tr>

</table>

<!--여기서부터 메뉴가 출력되는 부분의 소스입니다.-->

<div id=menu style="DISPLAY: none">
<tr>
<td align="right" width="18" height="11">
</td>
이곳에 출력될 코드를 넣어주시면 되요^^</TD>
</tr></TABLE>
</div>

--------------------------------------------------------------------

를 삽입해 주시면 됩니다. 원하는 위치에 원하는 스타일로 넣으시면 됩니다.

출력된 메뉴에는 링크소스나 기타 여러가지 태그들을 집어넣을 수 있습니다.



그런데 하나만 있다면 그게 메뉴로써 재구실을 할 수 없겠죠?

이럴 때는 다음과 같은 형식으로 소스를 삽입해주시면 됩니다.

------------------------------------------------------------
<script language="JavaScript">
ok=0; old_what="non";
function show(what){
  if((old_what != "non") && (what != old_what)){
ok=1;
old_what.style.display="none";
what.style.display="";
  }else
  {
if(ok){
  ok=0;
  what.style.display="none";
}else
{
  ok=1;
  what.style.display="";
}
  }
  old_what=what;
}
</script>


<!--메뉴를 출력시키고자 하는 문자나 이미지를 넣는 곳-->

<A href="Javascript:show(menu)"><b>출력할 메뉴의 이름</b></a></FONT>
</tr>

</table>

<!--여기서부터 메뉴가 출력되는 부분의 소스입니다.-->

<div id=menu style="DISPLAY: none">
<tr>
<td align="right" width="18" height="11">
</td>
이곳에 출력될 코드를 넣어주시면 되요^^</TD>
</tr></TABLE>
</div>


<!--이런 식으로 메뉴의 항목 숫자를 늘릴 수 있습니다^^-->

<A href="Javascript:show(menu1)"><b>출력할 메뉴의 이름</b></a></FONT>
</tr>

</table>

<div id=menu1 style="DISPLAY: none">
<tr>
<td align="right" width="18" height="11">
</td>
이런 식으로 메뉴의 항목 숫자를 늘릴 수 있습니다.<BR>
"Javascript:show(menu)" 부분과 div id=menu style="DISPLAY: none" 부분을<BR>
"Javascript:show(menu1)" 부분과 div id=menu1 style="DISPLAY: none" 로 수정한 것 보이시죠?^^<BR></TD>
</tr></TABLE>
</div>
---------------------------------------------------------------

"Javascript:show(menu)" 부분과 div id=menu style="DISPLAY: none" 부분을
"Javascript:show(menu1)" 부분과 div id=menu1 style="DISPLAY: none" 로 수정한 것 보이시죠?^^

이런 식으로 메뉴를 계속 확장해 나갈 수 있습니다^^;;

공간은 부족한데 메뉴 항목이 많을 때 유용하게 쓸 수 있으리라 생각되네요^^



예제 : http://dbwlgh.cafe24.com/HTML2/menu.html