옆의 그림은 menu.htm를 실행하기 위한
기본적인 파일구성이며,
menu.htm을 실행시켜 메뉴를 클릭하면
해당하는 하위메뉴가 나오고
다른 상위메뉴 클릭시 다른 상위메뉴의 하위메뉴는
사라진다.
아래의 예제파일 소스를 보면 하위메뉴가 있는 부분은
<span id=" " >과 </span>에 놓여져 있다.
▶ 상위메뉴 클릭시 하위 메뉴 나오는 스크립트_(해당하는 하위메뉴만 보임) 예제
<html>
<head>
<title>..</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<script language=JavaScript>
<!--
var old_menu = '';
function menuclick(submenu ,cellbar)
{
if( old_menu == submenu )
{
submenu.style.display = 'none';
old_menu = '';
}
else if (old_menu == '' && submenu2.style.display == 'block')
{
if (submenu.style.display == 'block')
{
submenu2.style.display = 'none';
}
else
{
//submenu2.style.display = 'none';
submenu.style.display = 'block';
old_menu = submenu;
}
}
else
{
if (old_menu != '' )
{
old_menu.style.display = 'none';
}
submenu.style.display = 'block';
old_menu = submenu;
}
}
//-->
</script>
<body bgcolor="#FFFFFF" text="#000000">
<table bordercolor=white cellspacing=0 cellpadding=0 width=135 border=0>
<tr>
<td style="CURSOR: hand" onClick=menuclick(submenu1,bar1) >
<img src="menu1.gif" name="bar1"></td>
</tr>
<Tr>
<td valign="top">
<span id=submenu1 style="DISPLAY: none; MARGIN-LEFT: 1px; CURSOR: hand">
<Table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td><img src="menu1-1.gif" border="0"></td>
</tr>
<tr>
<td><img src="menu1-2.gif" border="0"></td>
</tr>
</table></span></td>
</tr>
<tr>
<td style="CURSOR: hand" onClick=menuclick(submenu2,bar2) height=23>
<img src="menu2.gif" name="bar2"></td>
</tr>
<tr>
<td>
<span id=submenu2 style="DISPLAY: none; MARGIN-LEFT: 1px; CURSOR: hand">
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td><img src="menu2-1.gif" border="0"></td>
</tr>
<tr>
<td><img src="menu2-2.gif" border="0"></td>
</tr>
</table></span></td>
</tr>
<tr>
<td style="CURSOR: hand" onClick=menuclick(submenu3,bar3) height=23>
<img src="menu3.gif" name="bar3"></td>
</tr>
<tr>
<td>
<span id=submenu3 style="DISPLAY: none; MARGIN-LEFT: 1px; CURSOR: hand">
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td><img src="menu3-1.gif" border="0"></td>
</tr>
<tr>
<td><img src="menu3-2.gif" border="0"></td>
</tr></table>
</span> </td></tr>
<tr>
<td align=left><img src="menu4.gif" ></td>
</tr>
<tr>
<td align=left><img src="menu5.gif" ></td>
</tr>
</table>
</body>
</html>
이올린에 북마크하기
이올린에 추천하기'DATA > Javascript' 카테고리의 다른 글
| 스크롤이 반짝반짝 거려요` (0) | 2008/02/12 |
|---|---|
| 홈페이지 접속시 "LODING" 나오게 하기. (0) | 2008/02/12 |
| 상위메뉴 클릭시 하위메뉴 나오게 하기 (0) | 2008/02/12 |
| 랜덤화면보여주기 (0) | 2008/02/12 |
| 링크에 생기는 점선 싹쓸이 (0) | 2008/02/12 |
| 하이퍼링크점선테두리없애기 (0) | 2008/02/12 |
TRACKBACK 0 AND
COMMENT 0
PREV