| Power Menu Version 1.1 | Go to UP |
1.0버젼은 nn4에서 *.js 외부화일로 사용을 할수 없었는데, 1.1버젼에서는 사용할 수 있습니다. nn4까지 외부 화일에서 document.wrtie()로 페이지에 html을 적기가 까다롭기 때문에 *.js 화일로 사용하기가 힘듭니다. 그래서, 1.1에서는 페이지가 완전히 출력이 된후에 new Layer()로 레이어를 만들고 menu로 사용할 레이어들을 new Layer()로 만든 레이어에게 document.write(), document.close()를 사용하여 만듭니다.
if(n4) eval( arg[0] + "= new Layer(" + arg[1] + ")" )
이 때, nn4에서 <layer> 택의 src나 레이어.document.write(), 레이어.document.close() 로 레이어의 내용을
지정하면 지정한 레이어의 내용은 페이지의 <META> 택에 지정한 문자셋이 해제가 됩니다. 그래서, 사용자 브라우저의
문자셋에 지정한 문자셋 만이 듣습니다. nn4에서 사용자의 문자셋을 Korean외의 문자셋을 지정하면 "굴림" 문자가
나오지 않고 기본으로 지정된 문자가 나옵니다. 그래서, 투박하게 보입니다. 외부 화일로 사용하기 위해서는 이것을
감수해야 합니다. 외부화일로 사용하면 1.0에서 처럼 menu를 출력한 다음의 본문의 style이 듣지않는 문제도 없습니다.
ie4에서는 1.0 버젼도 외부화일로 사용할 수 있습니다. 그리고 이때도 페이지에 지정한 <META> 에 지정한
charset 값이 잘 듣습니다. 1.1은 두 브라우저에서 사용하기 편하게 외부화일로 사용할 수 있게 합니다. 그리고
1.0에 비하여 페이지에 출력하는 속도가 약간 빨라졌고 menu에 hr줄을 넣을수 있게 했습니다. 그리고 1.0에서
하위 연결 레이어가 있으면 화살표 이미지를 넣기 위해서 지정하는 인자가 있었는데, 1.1에서는 연결
레이어가 있으면 이미지를 넣고 없으면 넣지 않습니다. 1.0에서 처럼 이미지를 넣기 위하 인자를 지정할 필요가
없습니다.
사용할 때 수정해 주어야 할것은 1.0과 비슷합니다.
먼저, menu.js화일 안의 외부변수와 menu로 사용할 내용을 menuStore()함수로 적어 주어야 합니다.
이것은 menu.js 화일의 가장 밑부분에 있습니다.
var arrowPath = "./pos.gif" //하부가 있음을 나타내는 화살표 이미지 경로
var nnBackColor = "#CECEBD" // nn4 기본 바탕색
var ieBackColor = "#CECEBD" // ie4 기본 바탕색
var nnOnColor = "white" // 마우스가 갔을때 바뀔 바탕색
var ieOnColor = "navy" // 마우스가 갔을때 바뀔 바탕색
var outBorderColor = "red" //바깥 block 테두리 색
var inBoardColor = "#FFFFFF" //안쪽 block 테두리 색
var nnBaseFontColor = "black" // 각 내용의 처음 글자색
var ieBaseFontColor = "black" // 각 내용의 처음 글자색
var fontChangeColor = "white" // ie4에서만 사용함.
var fontBackColor = "black" // ie4에서만 사용함.
function menuStore() {
setMenu("상위레이어 이름", 레이어의 크기,
"첫번째하위레이어 이름", "하위에 지정한 연결레이어 이름", "레이어 내용", "", "URL",
"두번째하위레이어 이름", "하위에 지정한 연결레이어 이름", "레이어 내용", "1", "URL"
);
}
function menuStore() 가 메뉴내용을 지정하는 함수입니다. setMenu()에 지정할
인자들을 넣어줍니다. "상위레이어 이름"은 여러 하위 레이어를 가지고 있는
레이어의 이름이고 "하위에 지정한 연결레이어 이름"은 각 하위레이어에 마우스를
올렸을 때 보여줄 연결 레이어입니다. "하위에 지정한 연결레이어 이름"은 지정한
레이어가 없으면 공백("")으로 지정합니다. "레이어내용"은 각 메뉴에 넣을 글자입니다. "URL"은 레이어를 마우스로
눌렀을 때 이동할 곳의 주소입니다. "URL" 앞에 보면 "1"이 있습니다. 1.1버젼에서 추가한
것입니다. 이것은 각 하위레이어의 위에 <hr>을 하나 넣어주는 역할을 합니다. 브라우저의 bookmark에 보면 이런
줄이 있습니다. 이것을 참고 했습니다. 숫자나 문자 아무거나 하나 넣어주면 됩니다."상위레이어이름", 레이어의 크기, "각 하위레이어이름"은 꼭 지정을 해야 합니다. 같은 이름은 사용할 수 없습니다. 그외의 나머지 인자는 필요가 없으면 모두 공백("")으로 넣어주어야 합니다. 필요가 없다고 삭제를 하면 안되고 공백으로 지정을 해야합니다. 그리고 이들의 순서를 꼭 지켜야 합니다. 한가지 주의할 것은 마지막인자 다음, ); 앞에는 쉼표가 없습니다.
이렇게 지정한 menu.js 화일을 <HEAD>택 안에서 <SCRIPT> 택의 SRC에 지정하면 됩니다.
<head>
<style><!-- dummy{font-size:14pt;} --></style>
<script language="JavaScript1.2" src="./menu.js"></script>
</head>
로 사용할 menu.js 외부 화일을 지정합니다.
<style><!-- dummy{font-size:14pt;} --></style>
는 1.1을 위해서 넣어주어야 할것입니다. 안넣어주면 nn4에서 알수없는 에러가 났습니다. dummy라는 html 택은
없습니다. 그래서 이것은 페이지에 아무런 작용도 하지 않습니다. 단지 에러를 막기 위하여 넣어준 가짜 내용입니다.
이제 이 menu.js 화일을 사용해야 합니다. nn4는 <body onLoad="if(document.layers) menu()"> 로 지정을 합니다. new Layer()로 레이어를 만들었기 때문에 페이지가 다 출력된 후에 실행을 합니다. ie4는 <script>if(document.all) menu()</script> 로 <body> 다음에 넣어주면 됩니다. 이것을 정리하면 아래가 됩니다.
<html>
<head>
<style><!-- dummy{font-size:14pt;} --></style>
<script language="JavaScript1.2" src="./menu.js"></script>
</head>
<body onLoad="if(document.layers) menu()">
<script>if(document.all) menu()</script>
페이지 본문 내용..
</body>
</html>
로 1.0에 비하면 훨씬 간단하게 사용할 수 있습니다. 가장 상위의 메뉴레이어를 열려면
onLoad="시작함수()" 에서 지정한 "시작함수()" 안에서 메뉴레이어의 visibility값을 "visible"로 지정하면 됩니다.
링크로 메뉴를 여는것은 1.0과 같습니다.
<script language="JavaScript1.2">linkPrint("L1", "homeMenu", "HOME으로..")</script>
로 링크 레이어로 "사용할 레이어 이름", "보여줄 메뉴 레이어 이름", "링크내용 글자" 입니다.
<script language="JavaScript1.2">
linkPrint("L2", "sourceMenu", "[SOURCE]")
linkPrint("L3", "faqMenu", "[FAQ]")
linkPrint("L4", "dhtmlMenu", "[DHTML]")
</script>
여러개의 링크로 만들때는 갯수만큼 넣어주면 됩니다.
외국의 사이트에 가면 참 부러운게 많습니다. 왠만한 사이트에도 sponcer가 있고 내용도 무척 다양하니까요.. 근데 가장 부러운게 뭔지 아세요..? "이것을 만드는데 많은 reply로 개선을 하였습니다. 누구누구에게 감사합니다" 라는 말 이었습니다.
제 사이트를 개장한지 1년, 재개장한지 6개월이 지났는데, 2만 hit가 되어가는데, 단 한 통의 reply 메일을
받았습니다. 단 한통..... 오!! 놀라워라~~