ToolBar Ver1.1 for NN4 | ../ |
[IE4, IE5 용 Ver1.1] / [NN4 용 Ver1.1]
<!---------------------------------------------------
Tool Bar Version 1.1 (99/10/08)
Yongsuk Lee (spacekan@chollian.net)
http://user.chollian.net/~spacekan/
---------------------------------------------------->
<html><head><title>nn4 toolBar Ver1.1</title>
<meta type="text/html" charset="EUC-KR">
<style>
A.noLine { text-decoration:none; color:white; }
.cen { text-align:center; }
#M1 { position:absolute; top:0; left:0; width:150; border:outset 1px white; layer-background-color:silver; font-size:10pt; font-weight:bold; text-decoration:none;}
#M2 { position:absolute; top:0; left:100; width:100; border:outset 1px white; layer-background-color:silver; font-size:10pt; font-weight:bold;}
#M3 { position:absolute; top:0; left:200; width:100; border:outset 1px white; layer-background-color:silver; font-size:10pt; font-weight:bold;}
#M4 { position:absolute; top:0; left:300; width:50; border:outset 1px white; layer-background-color:silver; font-size:10pt; font-weight:bold;}
#S1 { position:absolute; top:40; left:0; width:200; visibility:hidden; }
#S2 { position:absolute; top:40; left:100; width:170; visibility:hidden;}
#S3 { position:absolute; top:40; left:200; width:170; visibility:hidden;}
#S4 { position:absolute; top:40; left:300; width:100; visibility:hidden;}
#s11, #s12, #s13, #s14 {
position:absolute; font-size:14px; width:200; left:0px; top:0px; border:outset 1px white;
layer-background-color:silver; padding-left:10px;
}
#s21, #s22, #s23, #s24 {
position:absolute; font-size:14px; width:170; left:0px; top:0px; border:outset 1px white;
layer-background-color:silver; padding-left:10px;
}
#s31, #s32, #s33, #s34 {
position:absolute; font-size:14px; width:170; left:0px; top:0px; border:outset 1px white;
layer-background-color:silver; padding-left:10px;
}
#s41, #s42 {
position:absolute; width:100; left:0px; top:0px; border:outset 1px white;
layer-background-color:silver;
}
</style>
<script language="JavaScript">
function menuOver() {
if( this.son != subLayerOn && subLayerOn)
subLayerOn.visibility="hidden"
this.bgColor= "lightgreen"
this.son.visibility="visible"
}
function menuOut() {
subLayerOn = this.son;
this.bgColor= "silver"
}
function fixMenu() {
this.top = window.pageYOffset
setTimeout("document.nn4toolBar.fixMenu()", 222)
}
function init() {
if(!document.layers) return
self.onmove=new Function("setTimeout('self.location.reload()', 1000)"); //nn4 reSize 버그 해결.
var s=menuPos=0, menuLayer=subLayer=eachMenu=null
for(var i=1; i<5; i++) {
menuLayer = document.layers["M"+i]
subLayer = document.layers["S"+i]
menuLayer.left = menuPos
menuPos += menuLayer.document.width
menuLayer.onmouseover=menuOver
menuLayer.onmouseout=menuOut
menuLayer.son=subLayer
subLayer.top = menuLayer.top + menuLayer.document.height
subLayer.left = menuLayer.left
subLayer.onmouseover=new Function("subLayerOn=this");
subLayer.onmouseout=new Function("this.visibility='hidden'")
for(s=upH=0; s<subLayer.document.layers.length; s++) {
eachMenu = subLayer.document.layers[s]
eachMenu.top = upH
upH += eachMenu.document.height
eachMenu.onmouseover=new Function("this.bgColor='lightgreen'")
eachMenu.onmouseout=new Function("this.bgColor='silver'")
}
subLayer.clip.height = upH
}
fixMenu()
}
subLayerOn=""
</script>
</head>
<body onLoad="init()">
<table width=500 height=150 border=1><tr><td> </td></tr></table>
<div id=M1><font class="cen"><a href="#" class=noLine>Tool Bar Ver 1.0</a></font></div>
<div id=M2><font class="cen">NN4 사용법</font></div>
<div id=M3><font class="cen">IE4 사용법</font></div>
<div id=M4><font class="cen">문제점</font></div>
<div id=S1>
<div id=s11><a href="toolBar10.htm" class=noLine>Tool Bar Ver 1.0</a></div><br>
<div id=s12><a href="toolBarWork.htm" class=noLine>ToolBar Ver 1.0 동작 방식</a></div><br>
<div id=s13><a href="toolBar10Base.htm" class=noLine>기본 페이지</a></div><br>
<div id=s14><a href="../toolBar.htm" class=noLine>../</a></div>
</div>
<div id=S2>
<div id=s21><a href="nn4MakeToolBar.htm" class=noLine>Tool Bar 만들기</a></div><br>
<div id=s22><a href="" class=noLine>배치하기</a></div><br>
<div id=s23><a href="" class=noLine>style과 html 작성하기</a></div><br>
<div id=s24><a href="" class=noLine>script 수정하기</a></div>
</div>
<div id=S3>
<div id=s31><a href="ie4MakeToolBar.htm" class=noLine>Tool Bar 만들기</a></div><br>
<div id=s32><a href="" class=noLine>배치하기</a></div><br>
<div id=s33><a href="" class=noLine>style과 html 작성하기</a></div><br>
<div id=s34><a href="" class=noLine>script 수정하기</a></div>
</div>
<div id=S4>
<div id=s41><a href="" class=noLine><img src="../images/n4.gif" border=0><img src="../images/n4.gif" border=0><img src="../images/n4.gif" border=0></a></div><br>
<div id=s42><a href="" class=noLine><img src="../images/e4.gif" border=0><img src="../images/e4.gif" border=0><img src="../images/e4.gif" border=0></a></div><br>
</div>
</body>
</html>
전체 구문인데 추가한 구문은 fixMenu() 함수 하나입니다. 이 함수는 가장 먼저 실행하는 init() 함수 안에서
페이지가 다 출력되자마자 실행합니다.
function fixMenu() {
this.top = window.pageYOffset
setTimeout("document.nn4toolBar.fixMenu()", 222)
}
function init() {
:
:
fixMenu()
}
nn4는 scroll 이벤트가 없습니다. 그래서 scroll 이벤트와 비슷한 동작을 시키기 위해서 함수를 계속
호출하여 매뉴를 가지고 있는 "nn4toolBar" 레이어의 좌표를 갱신합니다. 이동막대를 움직인
거리를 나타내는 것이 window.pageYOffset 입니다. ie4의 document.body.scrollTop 와 같은 동작을
하는 것입니다.
그리고 한 가지 주의해야 할 사항이 있습니다. nn4로 이 페이지를 왔다면 매뉴의 주위에 table border가 있는 것을 볼수 있을 것입니다. 이 table border 밑에 있는 링크는 누를 수 없습니다. 이유는 ver1.0 설명 페이지에 있습니다. 매뉴의 넓이의 구역 만큼은 본문의 내용위에 온다는 것을 말하기 위해서 border=1을 넣었습니다. 자신의 페이지에 사용할 때에는 border=0으로 지정하세요.
가능하면 모든 링크는 매뉴로 동작 시키고 페이지에 직접 넣어주어야 한다면 매뉴의 위치에 신경써서 페이지에 배치해야 링크가 매뉴 밑으로 들어가서 링크를 누를수 없는 불상사를 막을 수 있습니다.
[IE4, IE5 용 Ver1.1] / [NN4 용 Ver1.1]