컴퓨터이야기/JavaScript 트리 메뉴 by 변화지시자 2009. 1. 9. 반응형 <HTML> <HEAD> <TITLE>트리 메뉴</TITLE> <style type="text/css"> body {font-size:9pt} A: LINK {color:black; TEXT-DECORATION : NONE}; A: ACTIVE {color:black; TEXT-DECORATION : NONE}; A: VISITED {color:black; TEXT-DECORATION : NONE}; A: hover {color:blue; TEXT-DECORATION : underline}; </style> <SCRIPT LANGUAGE="JavaScript"> <!-- function clickHandler(){ var targetId, srcElement, targetElement; srcElement = window.event.srcElement;//이벤트가 발생된 엘레멘트(srcElement) 개체를 반환하거나 설정한다. alert (window.event.srcElement.className); if (srcElement.className == "Outline"){ targetId = srcElement.id + "1"; targetElement = document.all(targetId); if (targetElement.style.display == "none"){ targetElement.style.display = ""; srcElement.src = "menu2.gif"; }else{ targetElement.style.display = "none"; srcElement.src = "menu1.gif"; } } } //alert ("tartgetId"+targetId); //alert ("srcElement"+srcElement); //alert ("targetElement"+targetElement); document.onclick = clickHandler; //--> </SCRIPT> </HEAD> <body topmargin=20 leftmargin=10 bgcolor="#FFffff" link="#000066" vlink="#666666" text="#000000"> <BR><BR> <DIV ID="mainMenu1" class="Outline"> <IMG ID="menuItem1" CLASS="Outline" SRC="menu1.gif" STYLE="cursor: hand" WIDTH="16" HEIGHT="16"> 메뉴 1<BR> <DIV ID="menuItem11" STYLE="display:None"> <a href="#">☞ 메뉴 1-1</a><BR> <a href="#">☞ 메뉴 1-3</a><BR> <a href="#">☞ 메뉴 1-4</a><BR> </div> </div> <DIV ID="mainMenu2"> <IMG ID="menuItem2" CLASS="Outline" SRC="menu1.gif" STYLE="cursor: hand" WIDTH="16" HEIGHT="16"> 메뉴 2<BR> <DIV ID="menuItem21" STYLE="display:None"> <IMG ID="menuItem211" CLASS="Outline" SRC="menu1.gif" STYLE="cursor: hand" WIDTH="16" HEIGHT="16"> 메뉴 2-1<BR> <DIV ID="menuItem2111" STYLE="display:None"> <a href="#">☞ 메뉴 2-1-1</a><BR> <a href="#">☞ 메뉴 2-1-2</a><BR> <a href="#">☞ 메뉴 2-1-3</a><BR> <a href="#">☞ 메뉴 2-1-4</a><BR> </DIV> </DIV> </DIV> </BODY> </HTML> 공유하기 게시글 관리 Change Agent(변화변혁 주도자) 관련글 자바스크립트 2차원 배열 메뉴로 활용하면 좋은 자바스크립트 가로형 메뉴바(플래쉬 같은) input 박스에서 유용한 자바 스크립트