• 프리카운터
  • 플래시북
  • 프리보드
  • 전광판
  • 웹공부방
  • 커뮤니티
상위메뉴 클릭시 하위 메뉴 나오는 스크립트(하위메뉴가 전부 보임)

▶ menu폴더안에 있는 파일구성



옆의 그림은 menu.htm를 실행하기 위한
기본적인 파일구성이며,
menu.htm을 실행시켜 메뉴를 클릭하면
해당하는 하위메뉴가 나오고 다른 상위메뉴를 클릭하면
기존의 하위메뉴가 나온상태에서 하위메뉴가 나온다.
즉 상위메뉴의 클릭에 따라서 하위메뉴가 숨겨지지 않고
전부 펼쳐져 보인다고 할 수 있다.

아래의 예제파일 소스를 보면 하위메뉴가 있는 부분은
<span id=" " >과 </span>에 놓여져 있다.


▶ 상위메뉴 클릭시 하위 메뉴 나오는 스크립트_(하위메뉴가 전부 보임) 예제
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<script language="javascript">
<!--
function clickshow(num)
{
for (i=1;i<4;i++)
{
menu=eval("document.all.block"+i+".style");
imgch=eval("document.bar"+i);
if (num==i)
{
if (menu.display=="block")
{ menu.display="none";
imgch.src="img/menu"+i+".gif";
}
else {
menu.display="block";
imgch.src="img/menu"+i+".gif";
}
}
}
}
//-->
</script>
<body bgcolor="#FFFFFF" text="#000000">
<table bordercolor=white cellspacing=0 cellpadding=0 width=135 border=0>
<tr>
<td style="CURSOR: hand" onClick="clickshow(1)" height=27><img src="img/menu1.gif" width="186" height="27" name="bar1"></td>
</tr>
<Tr>
<td valign="top">
<span id=block1 style="DISPLAY: none; MARGIN-LEFT: 1px; CURSOR: hand">
<Table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td><img src="img/menu1-1.gif" width="186" height="28" border="0"></td>
</tr>
<tr>
<td><img src="img/menu1-2.gif" width="186" height="25" border="0"></td>
</tr>
</table></span></td>
</tr>
<tr>
<td style="CURSOR: hand" onClick="clickshow(2)" height=23><img src="img/menu2.gif" width="186" height="27" name="bar2"></td>
</tr>
<tr>
<td>
<span id=block2 style="DISPLAY: none; MARGIN-LEFT: 1px; CURSOR: hand">
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td><img src="img/menu2-1.gif" width="186" height="28" border="0"></td>
</tr>
<tr>
<td><img src="img/menu2-2.gif" width="186" height="25" border="0"></td>
</tr>
<tr>
</table></span></td>
</tr>
<tr>
<td style="CURSOR: hand" onClick="clickshow(3)" height=23><img src="img/menu3.gif" width="186" height="27" name="bar3"></td>
</tr>
<tr>
<td>
<span id=block3 style="DISPLAY: none; MARGIN-LEFT: 1px; CURSOR: hand">
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td><img src="img/menu3-1.gif" width="186" height="28" border="0"></td>
</tr>
<tr>
<td><img src="img/menu3-2.gif" width="186" height="25" border="0"></td>
</tr>
</table>
</span> </td></tr>
<tr>
<td align=left><img src="img/menu4.gif" width="186" height="28"></td>
</tr>
<tr>
<td align=left><img src="img/menu5.gif" width="186" height="28"></td>
</tr>
</table>
</body>
</html>

내알 FREECOUNT.NET 프카넷 생긴날 2003.12.20 홈 | 카운터 | 플래시북 | 프리보드 | 전광판 | 웹공부방 | 커뮤니티 | 쪽지함