묻고답하기
서브메뉴가 3개인 소스를 변경해서 4,5개의 메뉴를 만들고 싶습니다..
2003.01.06 15:14
제가 활용하려고 하는 소스입니다..
그런데, 이 소스는 주메뉴가 3개라서.. 저의 홈페이지에 적용을 시킬려고 하니 소스변경이 필수인데..
그 부분을 잘 모르겠습니다..
단순하게 3으로 변경된 부분을 수정하고 메뉴추가하면 될줄 알았더니 안되네요..(컴맹의 한계.. -.-;;)
다음 소스 보시고 조언 좀 해주셨으면 합니다..
<SCRIPT language=JavaScript>
<!--
// These scripts were originally found on cooltype.com.
// Modified 01/01/1999 by Tobias Ratschiller for linuxapps.com
// Modified 03/12/2001 by hgkim
document.onmouseover = doDocumentOnMouseOver ;
document.onmouseout = doDocumentOnMouseOut ;
max_num_of_menu = 3; // 전체 메뉴의 개수
function doDocumentOnMouseOver() {
var eSrc = window.event.srcElement ;
if (eSrc.className == "item") {
window.event.srcElement.className = "highlight";
}
}
function doDocumentOnMouseOut() {
var eSrc = window.event.srcElement ;
if (eSrc.className == "highlight") {
window.event.srcElement.className = "item";
}
}
var bV=parseInt(navigator.appVersion);
NS4=(document.layers) ? true : false;
IE4=((document.all)&&(bV>=4))?true:false;
ver4 = (NS4 || IE4) ? true : false;
function expandIt(){return}
function expandAll(){return}
//-->
</SCRIPT>
<script LANGUAGE="JavaScript1.2">
<!--
isExpanded = false;
function getIndex(el) {
ind = null;
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id == el) {
ind = i;
break;
}
}
return ind;
}
function arrange() {
nextY = document.layers[firstInd].pageY + document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.visibility != "hide") {
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}
}
function initIt(){
if (NS4) {
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
}
arrange();
} else {
tempColl = document.all.tags("DIV");
for (i=0; i<tempColl.length; i++) {
if (tempColl(i).className == "child") tempColl(i).style.display = "none";
}
}
}
function expandIt(el) {
if (!ver4) return;
if (IE4) {expandIE(el)} else {expandNS(el)}
}
function expandIE(el) {
whichEl = eval(el + "Child");
// Modified Tobias Ratschiller 01-01-99:
// event.srcElement obviously only works when clicking directly
// on the image. Changed that to use the images's ID instead (so
// you've to provide a valid ID!).
//whichIm = event.srcElement;
whichIm = eval(el+"Img");
if (whichEl.style.display == "none") {
for (i=1; i<=max_num_of_menu; i++) {
everyEl = eval("el" + i + "Child");
everyIm = eval("el" + i + "Img");
if (everyEl != whichEl) {
everyEl.style.display = "none";
everyIm.src = "img/plus.gif";
} else {
whichEl.style.display = "block";
whichIm.src = "img/minus.gif";
}
}
} else {
whichEl.style.display = "none";
whichIm.src = "img/plus.gif";
}
window.event.cancelBubble = true ;
}
function expandNS(el) {
whichEl = eval("document." + el + "Child");
whichIm = eval("document." + el + "Parent.document.images['imEx']");
if (whichEl.visibility == "hide") {
for (i=1; i<=max_num_of_menu; i++) {
everyEl = eval("document.el" + i + "Child");
everyIm = eval("document.el" + i + "Parent.document.images['imEx']");
if (everyEl != whichEl) {
everyEl.visibility = "hide";
everyIm.src = "img/plus.gif";
} else {
whichEl.visibility = "show";
whichIm.src = "img/minus.gif";
}
}
} else {
whichEl.visibility = "hide";
whichIm.src = "img/plus.gif";
}
arrange();
}
function showAll() {
for (i=firstInd; i<document.layers.length; i++) {
whichEl = document.layers[i];
whichEl.visibility = "show";
}
}
function expandAll(isBot) {
newSrc = (isExpanded) ? "img/plus.gif" : "img/minus.gif";
if (NS4) {
// TR-02-01-99: Don't need that
// document.images["imEx"].src = newSrc;
for (i=firstInd; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Parent") != -1) {
whichEl.document.images["imEx"].src = newSrc;
}
if (whichEl.id.indexOf("Child") != -1) {
whichEl.visibility = (isExpanded) ? "hide" : "show";
}
}
arrange();
if (isBot && isExpanded) scrollTo(0,document.layers[firstInd].pageY);
} else {
divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
if (divColl(i).className == "child") {
divColl(i).style.display = (isExpanded) ? "none" : "block";
}
}
imColl = document.images.item("imEx");
for (i=0; i<imColl.length; i++) {
imColl(i).src = newSrc;
}
}
isExpanded = !isExpanded;
}
with (document) {
write("<STYLE TYPE='text/css'>");
if (NS4) {
write(".parent {font-family: 굴림, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; position:absolute; visibility:show;}");
write(".child {font-family: 굴림, Arial, Helvetica, sans-serif; font-size: 8pt;color: #000000; position:absolute; visibility:hidden}");
write(".item { color: black; text-decoration:none;}");
write(".s_item { color: black; text-decoration:none;}");
write(".regular {font-family: Arial,Helvetica,sans-serif; position:absolute; visibility:hidden}");
write("DIV { color:black; }")
} else {
write(".child {font-family: 굴림, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; display:none}");
write(".parent {font-family: 굴림, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none;}");
write(".item { color: black; font-size:12px; text-decoration:none;}");
write(".s_item { color: black; font-size:11px; text-decoration:none;}");
write(".highlight { color:#FF9900 ; font-size:9pt; text-decoration:none;}");
write(".heada { font-size:9pt;}");
write("DIV { color:black; }")
}
write("</STYLE>");
}
onload = initIt;
//-->
</script>
<base target="MAIN">
<style type="text/css">
//<!--
BODY { font-family : 굴림, Arial, Helvetica, sans-serif; font-size: 12px; }
//-->
</style>
</HEAD>
<BODY bgColor=#FFCC00 leftMargin=0 topMargin=5 marginheight=0 marginwidth=0><P>
<HR size=1 width=115 align=center>
<div ID="el1Parent" CLASS="parent">
<IMG src=./img/n.gif width=3>
<a class="item" HREF="./no.php3" onClick="expandIt('el1'); return false;">
<img NAME="imEx" SRC="img/plus.gif" BORDER="0" ALT="+" width="9" height="9" ID="el1Img"></a>
<a class="item" HREF="./bank/note.php3?dist=linux_notes" onClick="expandIt('el1');">
<font color="black" class="heada">Linux</font></a>
</div>
<div ID="el1Child" CLASS="child" style='line-height:100%'>
├ <a class="s_item" HREF="./bank/class.php3?dist=linux_basic">Basic</a><br>
├ <a class="s_item" HREF="./bank/class.php3?dist=linux_admin">Admin Work</a><br>
├ <a class="s_item" HREF="./bank/class.php3?dist=linux_network">Networking</a><br>
└ <a class="s_item" HREF="./bank/class.php3?dist=linux_security">Security</a><br>
<IMG src=./img/n.gif height=5><br>
</div>
<div ID="el2Parent" CLASS="parent">
<IMG src=./img/n.gif width=3>
<a class="item" HREF="./no.php3" onClick="expandIt('el2'); return false;">
<img NAME="imEx" SRC="img/plus.gif" BORDER="0" ALT="+" width="9" height="9" ID="el2Img"></a>
<a class="item" HREF="./bank/note.php3?dist=wb_notes" onClick="expandIt('el2');">
<font color="black" class="heada">Internet</font></a>
</div>
<div ID="el2Child" CLASS="child" style='line-height:100%'>
├ <a class="s_item" HREF="./bank/class.php3?dist=ibiz">i-biz info</a><br>
├ <a class="s_item" HREF="./documents/color.php3">Color Selector</a><br>
├ <a class="s_item" HREF="./bank/class.php3?dist=php_class">php+MySQL</a><br>
├ <a class="s_item" HREF="./bank/pds.php3?dist=gn">General pds</a><br>
├ <a class="s_item" HREF="./bank/pds.php3?dist=sk">011,017 pds</a><br>
├ <a class="s_item" HREF="./bank/pds.php3?dist=nm">016,018 pds</a><br>
├ <a class="s_item" HREF="./bank/pds.php3?dist=ez">019 pds</a><br>
├ <a class="s_item" HREF="./bank/bookmark.php3">Bookmark</a><br>
└ <a class="s_item" HREF="./bank/scrshot.php3?dist=H_samples">HP Samples</a><br>
<IMG src=./img/n.gif height=5><br>
</div>
<div ID="el3Parent" CLASS="parent">
<IMG src=./img/n.gif width=3>
<a class="item" HREF="./no.php3" onClick="expandIt('el3'); return false;">
<img NAME="imEx" SRC="img/plus.gif" BORDER="0" ALT="+" width="9" height="9" ID="el3Img"></a>
<a class="item" HREF="./bank/note.php3?dist=report_notes" onClick="expandIt('el3');">
<font color="black" class="heada">Class</font></a>
</div>
<div ID="el3Child" CLASS="child" style='line-height:100%'>
├ <a class="s_item" HREF="./bank/class.php3?dist=class_pds">pds</a><br>
├ <a class="s_item" HREF="./bank/submit.php3?dist=report_submit">Submit</a><br>
└ <a class="s_item" HREF="./bank/forum.php3?dist=report_Q_A">Q & A</a><br>
<IMG src=./img/n.gif height=5><br>
</div>
<script LANGUAGE="JavaScript1.2">
<!--
if (NS4) {
firstEl = "el1Parent";
firstInd = getIndex(firstEl);
showAll();
arrange();
}
//-->
</script>
그런데, 이 소스는 주메뉴가 3개라서.. 저의 홈페이지에 적용을 시킬려고 하니 소스변경이 필수인데..
그 부분을 잘 모르겠습니다..
단순하게 3으로 변경된 부분을 수정하고 메뉴추가하면 될줄 알았더니 안되네요..(컴맹의 한계.. -.-;;)
다음 소스 보시고 조언 좀 해주셨으면 합니다..
<SCRIPT language=JavaScript>
<!--
// These scripts were originally found on cooltype.com.
// Modified 01/01/1999 by Tobias Ratschiller for linuxapps.com
// Modified 03/12/2001 by hgkim
document.onmouseover = doDocumentOnMouseOver ;
document.onmouseout = doDocumentOnMouseOut ;
max_num_of_menu = 3; // 전체 메뉴의 개수
function doDocumentOnMouseOver() {
var eSrc = window.event.srcElement ;
if (eSrc.className == "item") {
window.event.srcElement.className = "highlight";
}
}
function doDocumentOnMouseOut() {
var eSrc = window.event.srcElement ;
if (eSrc.className == "highlight") {
window.event.srcElement.className = "item";
}
}
var bV=parseInt(navigator.appVersion);
NS4=(document.layers) ? true : false;
IE4=((document.all)&&(bV>=4))?true:false;
ver4 = (NS4 || IE4) ? true : false;
function expandIt(){return}
function expandAll(){return}
//-->
</SCRIPT>
<script LANGUAGE="JavaScript1.2">
<!--
isExpanded = false;
function getIndex(el) {
ind = null;
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id == el) {
ind = i;
break;
}
}
return ind;
}
function arrange() {
nextY = document.layers[firstInd].pageY + document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.visibility != "hide") {
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}
}
function initIt(){
if (NS4) {
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
}
arrange();
} else {
tempColl = document.all.tags("DIV");
for (i=0; i<tempColl.length; i++) {
if (tempColl(i).className == "child") tempColl(i).style.display = "none";
}
}
}
function expandIt(el) {
if (!ver4) return;
if (IE4) {expandIE(el)} else {expandNS(el)}
}
function expandIE(el) {
whichEl = eval(el + "Child");
// Modified Tobias Ratschiller 01-01-99:
// event.srcElement obviously only works when clicking directly
// on the image. Changed that to use the images's ID instead (so
// you've to provide a valid ID!).
//whichIm = event.srcElement;
whichIm = eval(el+"Img");
if (whichEl.style.display == "none") {
for (i=1; i<=max_num_of_menu; i++) {
everyEl = eval("el" + i + "Child");
everyIm = eval("el" + i + "Img");
if (everyEl != whichEl) {
everyEl.style.display = "none";
everyIm.src = "img/plus.gif";
} else {
whichEl.style.display = "block";
whichIm.src = "img/minus.gif";
}
}
} else {
whichEl.style.display = "none";
whichIm.src = "img/plus.gif";
}
window.event.cancelBubble = true ;
}
function expandNS(el) {
whichEl = eval("document." + el + "Child");
whichIm = eval("document." + el + "Parent.document.images['imEx']");
if (whichEl.visibility == "hide") {
for (i=1; i<=max_num_of_menu; i++) {
everyEl = eval("document.el" + i + "Child");
everyIm = eval("document.el" + i + "Parent.document.images['imEx']");
if (everyEl != whichEl) {
everyEl.visibility = "hide";
everyIm.src = "img/plus.gif";
} else {
whichEl.visibility = "show";
whichIm.src = "img/minus.gif";
}
}
} else {
whichEl.visibility = "hide";
whichIm.src = "img/plus.gif";
}
arrange();
}
function showAll() {
for (i=firstInd; i<document.layers.length; i++) {
whichEl = document.layers[i];
whichEl.visibility = "show";
}
}
function expandAll(isBot) {
newSrc = (isExpanded) ? "img/plus.gif" : "img/minus.gif";
if (NS4) {
// TR-02-01-99: Don't need that
// document.images["imEx"].src = newSrc;
for (i=firstInd; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Parent") != -1) {
whichEl.document.images["imEx"].src = newSrc;
}
if (whichEl.id.indexOf("Child") != -1) {
whichEl.visibility = (isExpanded) ? "hide" : "show";
}
}
arrange();
if (isBot && isExpanded) scrollTo(0,document.layers[firstInd].pageY);
} else {
divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
if (divColl(i).className == "child") {
divColl(i).style.display = (isExpanded) ? "none" : "block";
}
}
imColl = document.images.item("imEx");
for (i=0; i<imColl.length; i++) {
imColl(i).src = newSrc;
}
}
isExpanded = !isExpanded;
}
with (document) {
write("<STYLE TYPE='text/css'>");
if (NS4) {
write(".parent {font-family: 굴림, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; position:absolute; visibility:show;}");
write(".child {font-family: 굴림, Arial, Helvetica, sans-serif; font-size: 8pt;color: #000000; position:absolute; visibility:hidden}");
write(".item { color: black; text-decoration:none;}");
write(".s_item { color: black; text-decoration:none;}");
write(".regular {font-family: Arial,Helvetica,sans-serif; position:absolute; visibility:hidden}");
write("DIV { color:black; }")
} else {
write(".child {font-family: 굴림, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none; display:none}");
write(".parent {font-family: 굴림, Arial, Helvetica, sans-serif; color: #000000; text-decoration:none;}");
write(".item { color: black; font-size:12px; text-decoration:none;}");
write(".s_item { color: black; font-size:11px; text-decoration:none;}");
write(".highlight { color:#FF9900 ; font-size:9pt; text-decoration:none;}");
write(".heada { font-size:9pt;}");
write("DIV { color:black; }")
}
write("</STYLE>");
}
onload = initIt;
//-->
</script>
<base target="MAIN">
<style type="text/css">
//<!--
BODY { font-family : 굴림, Arial, Helvetica, sans-serif; font-size: 12px; }
//-->
</style>
</HEAD>
<BODY bgColor=#FFCC00 leftMargin=0 topMargin=5 marginheight=0 marginwidth=0><P>
<HR size=1 width=115 align=center>
<div ID="el1Parent" CLASS="parent">
<IMG src=./img/n.gif width=3>
<a class="item" HREF="./no.php3" onClick="expandIt('el1'); return false;">
<img NAME="imEx" SRC="img/plus.gif" BORDER="0" ALT="+" width="9" height="9" ID="el1Img"></a>
<a class="item" HREF="./bank/note.php3?dist=linux_notes" onClick="expandIt('el1');">
<font color="black" class="heada">Linux</font></a>
</div>
<div ID="el1Child" CLASS="child" style='line-height:100%'>
├ <a class="s_item" HREF="./bank/class.php3?dist=linux_basic">Basic</a><br>
├ <a class="s_item" HREF="./bank/class.php3?dist=linux_admin">Admin Work</a><br>
├ <a class="s_item" HREF="./bank/class.php3?dist=linux_network">Networking</a><br>
└ <a class="s_item" HREF="./bank/class.php3?dist=linux_security">Security</a><br>
<IMG src=./img/n.gif height=5><br>
</div>
<div ID="el2Parent" CLASS="parent">
<IMG src=./img/n.gif width=3>
<a class="item" HREF="./no.php3" onClick="expandIt('el2'); return false;">
<img NAME="imEx" SRC="img/plus.gif" BORDER="0" ALT="+" width="9" height="9" ID="el2Img"></a>
<a class="item" HREF="./bank/note.php3?dist=wb_notes" onClick="expandIt('el2');">
<font color="black" class="heada">Internet</font></a>
</div>
<div ID="el2Child" CLASS="child" style='line-height:100%'>
├ <a class="s_item" HREF="./bank/class.php3?dist=ibiz">i-biz info</a><br>
├ <a class="s_item" HREF="./documents/color.php3">Color Selector</a><br>
├ <a class="s_item" HREF="./bank/class.php3?dist=php_class">php+MySQL</a><br>
├ <a class="s_item" HREF="./bank/pds.php3?dist=gn">General pds</a><br>
├ <a class="s_item" HREF="./bank/pds.php3?dist=sk">011,017 pds</a><br>
├ <a class="s_item" HREF="./bank/pds.php3?dist=nm">016,018 pds</a><br>
├ <a class="s_item" HREF="./bank/pds.php3?dist=ez">019 pds</a><br>
├ <a class="s_item" HREF="./bank/bookmark.php3">Bookmark</a><br>
└ <a class="s_item" HREF="./bank/scrshot.php3?dist=H_samples">HP Samples</a><br>
<IMG src=./img/n.gif height=5><br>
</div>
<div ID="el3Parent" CLASS="parent">
<IMG src=./img/n.gif width=3>
<a class="item" HREF="./no.php3" onClick="expandIt('el3'); return false;">
<img NAME="imEx" SRC="img/plus.gif" BORDER="0" ALT="+" width="9" height="9" ID="el3Img"></a>
<a class="item" HREF="./bank/note.php3?dist=report_notes" onClick="expandIt('el3');">
<font color="black" class="heada">Class</font></a>
</div>
<div ID="el3Child" CLASS="child" style='line-height:100%'>
├ <a class="s_item" HREF="./bank/class.php3?dist=class_pds">pds</a><br>
├ <a class="s_item" HREF="./bank/submit.php3?dist=report_submit">Submit</a><br>
└ <a class="s_item" HREF="./bank/forum.php3?dist=report_Q_A">Q & A</a><br>
<IMG src=./img/n.gif height=5><br>
</div>
<script LANGUAGE="JavaScript1.2">
<!--
if (NS4) {
firstEl = "el1Parent";
firstInd = getIndex(firstEl);
showAll();
arrange();
}
//-->
</script>