민가촌(광고는 사양하고/ 회원가입은 받지 않습니다)_200
|
전체갯수 : 204
(30 searched) , 1 / 2 pages
|
로그인
|
| 이 름 |
tj |
| 제 목 |
[JavaScript] 클릭으로 작동되는 트리구조형 메뉴 - 서브메뉴를 여러개 보여주기 |
참고; http://www.happyscript.net
//〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=ks_c_5601-1987">
<SCRIPT language=javascript>
function menu(name)
{
submenu=eval("submenu_"+name+".style");
if (submenu.display=='none')
{
submenu.display='block';
}
else
{
submenu.display='none';
}
}
</SCRIPT>
<META content="MSHTML 6.00.2900.3314" name=GENERATOR></HEAD>
<BODY>
<A style="CURSOR: hand" onclick=menu(1);><B>메뉴1</B></A> <BR>
<SPAN id=submenu_1 style="DISPLAY: none">
서브메뉴<BR>
서브메뉴<P>
</SPAN>
<A style="CURSOR: hand" onclick=menu(2);><B>메뉴2</B></A>
<SPAN id=submenu_2 style="DISPLAY: none">
서브메뉴<BR>
서브메뉴<P>
</SPAN></P>
</BODY></HTML>
//〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
// 버튼 형식
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<script type="text/javascript">
function toggleContent() {
// Get the DOM reference
var contentId = document.getElementById("content");
// Toggle
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
<div ID="content" style="display:block;">This is content.</div>
....
<button onclick="toggleContent()">Toggle</button>
//〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
// 슬라이딩 메뉴
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<HTML>
<HEAD>
<TITLE>Sliding Menu</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT" LANGUAGE=JAVASCRIPT>
<!-- Hide script from older browsers
function toggleMenu(currMenu) {
if (document.all) {
thisMenu = eval("document.all." + currMenu + ".style")
if (thisMenu.display == "block") {
thisMenu.display = "none"
}
else {
thisMenu.display = "block"
}
return false
}
else {
return true
}
}
// End hiding script -->
</SCRIPT>
<STYLE TYPE="TEXT/CSS">
#menu1 {display:none; margin-left:20px}
#menu2 {display:none; margin-left:20px}
#menu21 {display:none; margin-left:20px}
#menu3 {display:none; margin-left:20px}
</STYLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<H1>슬라이딩 메뉴</H1>
<H3>
<A HREF="page1.html" onClick="return toggleMenu('menu1')">#. 언론사</A>
</H3>
<div ID="menu1" style="DISPLAY: block">
KBS<br>
MBC<BR>
SBS<BR>
</div>
<br>
<A style="CURSOR: hand" onClick="return toggleMenu('menu2')"
OnMouseOver="this.style.background='#80BFFF'" OnMouseOut="this.style.background=''">
<font size="4"> #. 가수 ... </font></A>
<div ID="menu2">
<A HREF="page21.html" onClick="return toggleMenu('menu21')">▷ 분류 1 </A> <BR>
<div ID="menu21" style="DISPLAY: none">
/ 조성모 <BR>
/ 크라잉넛 <BR>
</div>
▷ 분류 2 <BR>
▷ 분류 3 <BR>
</div>
<H3>
<A HREF="page3.html" onClick="return toggleMenu('menu3')">#. 취미생활</A>
</H3>
<div ID="menu3">
인터넷 사냥하기<BR>
머그 게임<BR>
소주한잔<BR>
간단히 당구 한 게임<br>
</div>
</BODY>
</HTML>
//〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<html>
<head>
<SCRIPT language=javascript>
function menu(name)
{
submenu=eval("submenu_"+name+".style");
if (submenu.display=='none')
{
submenu.display='block';
}
else
{
submenu.display='none';
}
}
</SCRIPT>
<BODY>
<table border=0 CELLSPACING="1" CELLPADDING="1" bgcolor=#E0E7F8 >
<tr> <td width=160>
<A style="CURSOR: hand" onclick=menu(1);><B>메뉴1 </B></A> <BR>
</td> </tr>
<tr bgcolor=#FF9999 > <td> </td> </tr>
<tr bgcolor=#F0FFF0 > <td>
<SPAN id=submenu_1 style="DISPLAY: none">
서브메뉴<BR>
서브메뉴<br>
</SPAN>
</td> </tr>
</table>
<br>
<table border=0 CELLSPACING="1" CELLPADDING="1" bgcolor=#E0E7F8 >
<tr> <td width=160>
<A style="CURSOR: hand" onclick=menu(2);><B>메뉴2 </B></A> <BR>
</td> </tr>
<tr bgcolor=#0080B0 > <td> </td> </tr>
<tr bgcolor=#F0FFF0 > <td>
<SPAN id=submenu_2 style="DISPLAY: block">
서브메뉴<BR>
서브메뉴<br>
</SPAN>
</td> </tr>
</table>
</body>
</html> |
|
