탐색기 메뉴 3 | ../ |
지금(99년8월) 이 페이지의 왼쪽 프레임으로 사용하고 있는 매뉴입니다. 그동안 사용한 것이 앞 페이지의 예제를 약간 수정하여 사용하였는데 이것이 주 매뉴를 9개만 사용할 수 있었습니다. 10개 부터는 오작동 하였죠.. 이것을 수정한 예제입니다. (이 문제를 발견하여 낙서판에 수정 요청을 한 분께 감사드립니다. 꾸벅..)
이 예제는 주 매뉴의 갯수에는 제한이 없습니다. 시험적으로 25개를 사용하여 시험해 보았는데 잘 작동했습니다. 지금(99년8월) 왼쪽 프레임에 사용하고 있는 매뉴는 주 매뉴의 이름을 "D1"에서 "D9"까지 9개만 사용할 수 있습니다. 그래서 사용하고 있는 주 매뉴의 갯수에 제한이 없게 하기 위해서 앞 페이지와 거의 같지만 조금 다른 JavaScript를 사용하고 매뉴의 HTML 작성도 조금 수정되었습니다.
수정한 HTML은 아래입니다.
먼저 사용할 절대 좌표 레이어의 style을 지정합니다. left, top 값은 이미지의 크기에 맞게 지정하면 됩니다. 여기서는 넓이 100, 높이 17의 크기를 가지는 이미지를 css-p 레이어 안에두고 주 매뉴로 사용합니다.
<style type="text/css">
#D1 { position:absolute; width:100; top:18px; left:10px; }
#D2 { position:absolute; width:100; top:38px; left:10px; }
#D3 { position:absolute; width:100; top:58px; left:10px; }
#D4 { position:absolute; width:100; top:78px; left:10px; }
#D5 { position:absolute; width:100; top:98px; left:10px; }
#D6 { position:absolute; width:100; top:118px; left:10px; }
#D7 { position:absolute; width:100; top:138px; left:10px; }
#D8 { position:absolute; width:100; top:158px; left:10px; }
#D9 { position:absolute; width:100; top:178px; left:10px; }
#D10 { position:absolute; width:100; top:198px; left:10px; }
#D11 { position:absolute; width:100; top:218px; left:10px; }
#D12 { position:absolute; width:100; top:238px; left:10px; }
#D1Sub, #D2Sub, #D3Sub, #D4Sub, #D5Sub, #D6Sub,
#D7Sub, #D8Sub, #D9Sub, #D10Sub {
position:absolute; width:100; top:0px; left:0px; visibility:hidden;
}
</style>
으로 12개의 주 매뉴로 사용할 레이어의 좌표를 지정합니다. "#D1"에서 "#D12" 까지가
주 매뉴로 사용할 레이어입니다. 나머지 "Sub"라는 글자가 붙은 레이어는
각 레이어에 마우스를 가져가면 보여줄 링크를 가지고 있는 하위 매뉴입니다.
하위 매뉴의 이름은 상위 매뉴 레이어의 이름에 "Sub"라는 문자열을 붙여 주세요..
사실 앞 페이지의 문제를 해결한 방법도 이게 다입니다. :)
그래서 "D1" 레이어의 하위 레이어 이름은 "D1Sub"가 됩니다. 다른 style은 필요에 따라서 알맞은 값을 지정하면 됩니다. 중요한 것은 위의 각 레이어의 이름을 붙이는 방법입니다.
위의 style을 지정하여 매뉴로 작성한 HTML은 아래입니다.
<div id=D1> <a href="..." onMouseOver="actionMenu(1)" onmouseout="clearTimeout(action_ID)"><img src="d1.gif"></a> </div> <div id=D1Sub> <nobr><a href="...">D1 하위 링크 1</a></nobr> </div> <div id=D2> <a href="..." onMouseOver="actionMenu(2)" onmouseout="clearTimeout(action_ID)"><img src="d2.gif"></a> </div> <div id=D2Sub> <nobr><a href="...">D2 하위 링크 1</a></nobr><br> <nobr><a href="...">D2 하위 링크 2</a></nobr><br> <nobr><a href="...">D2 하위 링크 3</a></nobr> </div> <div id=D3> <a href="..." onMouseOver="actionMenu(3)" onmouseout="clearTimeout(action_ID)"><img src="d3.gif"></a> </div> <div id=D3Sub> <nobr><a href="...">D3 하위 링크 1</a></nobr><br> <nobr><a href="...">D3 하위 링크 2</a></nobr> </div> <div id=D4> <a href="..." onMouseOver="actionMenu(4)" onmouseout="clearTimeout(action_ID)"><img src="d4.gif"></a> </div> <div id=D4Sub> <nobr><a href="...">D4 하위 링크 1</a></nobr><br> <nobr><a href="...">D2 하위 링크 2</a></nobr><br> <nobr><a href="...">D2 하위 링크 3</a></nobr><br> <nobr><a href="...">D4 하위 링크 4</a></nobr> </div> <div id=D5> <a href="..." onMouseOver="actionMenu(5)" onmouseout="clearTimeout(action_ID)"><img src="d5.gif"></a> </div> <div id=D5Sub> <nobr><a href="...">D5 하위 링크 1</a></nobr><br> <nobr><a href="...">D5 하위 링크 2</a></nobr> </div> <div id=D6> <a href="..." onMouseOver="actionMenu(6)" onmouseout="clearTimeout(action_ID)"><img src="d6.gif"></a> </div> <div id=D6Sub> <nobr><a href="...">D6 하위 링크 1</a></nobr><br> <nobr><a href="...">D6 하위 링크 2</a></nobr> </div> <div id=D7> <a href="..." onMouseOver="actionMenu(7)" onmouseout="clearTimeout(action_ID)"><img src="d7.gif"></a> </div> <div id=D7Sub> <nobr><a href="...">D7 하위 링크 1</a></nobr><br> <nobr><a href="...">D7 하위 링크 2</a></nobr><br> <nobr><a href="...">D7 하위 링크 3</a></nobr> </div> <div id=D8> <a href="..." onMouseOver="actionMenu(8)" onmouseout="clearTimeout(action_ID)"><img src="d8.gif"></a> </div> <div id=D8Sub> <nobr><a href="...">D8 하위 링크 1</a></nobr><br> <nobr><a href="...">D8 하위 링크 2</a></nobr><br> <nobr><a href="...">D8 하위 링크 3</a></nobr><br> <nobr><a href="...">D8 하위 링크 4</a></nobr> </div> <div id=D9> <a href="..." onMouseOver="actionMenu(9)" onmouseout="clearTimeout(action_ID)"><img src="d9.gif"></a> </div> <div id=D9Sub> <nobr><a href="...">D9 하위 링크 1</a></nobr><br> <nobr><a href="...">D9 하위 링크 2</a></nobr> </div> <div id=D10> <a href="..." onMouseOver="actionMenu(10)" onmouseout="clearTimeout(action_ID)"><img src="d10.gif"></a> </div> <div id=D10Sub> <nobr><a href="...">D10 하위 링크 1</a></nobr><br> <nobr><a href="...">D10 하위 링크 2</a></nobr> </div> <div id=D11> <a href="..." onMouseOver="actionMenu(11)" onmouseout="clearTimeout(action_ID)"><img src="d11.gif"></a> </div> <div id=D12> <a href="..." onMouseOver="actionMenu(12)" onmouseout="clearTimeout(action_ID)"><img src="d12.gif"></a> </div>주 매뉴로 사용할 레이어와 주 매뉴에 마우스가 가면 보여줄 레이어의 이름을 지정하는 방식은 위의 HTML을 보면 잘 이해가 될것입니다. 각 주 매뉴는 "D1" 부터 시작하여 이름을 지어줍니다. 두번째는 "D2" 가 되겠죠..? 그러면 10번째 주 매뉴는요? You got it!! "D10" 입니다. 이렇게 매뉴의 갯수에 따라서 이름을 1씩 더해서 지어주어야 합니다.
하위 매뉴는 없어도 됩니다. 위에서는 "D11", "D12" 레이어가 하위가 없습니다.
이 예제가 작동하는 방식은 주 매뉴 안의 링크로 동작합니다. 그래서 주 매뉴 레이어의 내용물인 이미지를 링크택 안에 둡니다. 그리고 이 링크 택의 이벤트인 mouseover, mouseout로 매뉴를 동작시킵니다. 이것이 가장 간단합니다. 아래는 링크에 지정한 이벤트입니다.
<div id=D1> <a href="..." onMouseOver="actionMenu(1)" onmouseout="clearTimeout(action_ID)"><img src="d1.gif"></a> </div> <div id=D1Sub> <nobr><a href="...">D1 하위 링크 1</a></nobr> </div>위의 굵은 글자가 매뉴를 동작시킵니다. mouseover는 하위 매뉴를 보여주고 mouseout는 닫습니다. 하위 매뉴를 닫는 것은 onmouseout="clearTimeout(action_ID)만 지정하면 되지만 매뉴를 여는 이벤트인 mouseover에는 인자로 각 주 매뉴 레이어의 "D" 다음에 있는 숫자를 지정해 줍니다. onMouseOver="actionMenu(1)입니다. "D1" 레이어니까 1을 인자로 지정합니다.
다음은 사용한 JavaScript입니다.
/************************************************
Yongsuk Lee( spacekan@chollian.net )
Date : 1999 08 17
http://user.chollian.net/~spacekan/
************************************************/
function expMenu(order) {
if(n4) {
var nextObj = document.layers["D"+(order+1)]
if(nextObj) {
nextObj.top += subBit
if(nextObj.sub) nextObj.sub.top += subBit
expMenu(order+1)
}
}
else {
var nextObj = document.all["D"+(order+1)]
if(nextObj) {
nextObj.style.pixelTop += subBit
if(nextObj.sub) nextObj.sub.style.pixelTop += subBit
expMenu(order+1)
}
}
}
function colMenu(order) {
if(n4) {
var nextObj = document.layers["D"+(order+1)]
if(nextObj) {
nextObj.top -= subBit
if(nextObj.sub) nextObj.sub.top -= subBit
colMenu(order+1)
}
}
else {
var nextObj = document.all["D"+(order+1)]
if(nextObj) {
nextObj.style.pixelTop -= subBit
if(nextObj.sub) nextObj.sub.style.pixelTop -= subBit
colMenu(order+1)
}
}
}
function actionMenu2(order) {
if(n4) var obj = document.layers["D"+order]
else var obj = document.all["D"+order]
if(!obj.opened) {
if( obj.sub ) {
if(n4) obj.sub.visibility = "visible"
else obj.sub.style.visibility = "visible"
}
obj.opened = !obj.opened
if(self.frontOrder && self.frontOrder != order ) actionMenu2(frontOrder);
frontOrder = order
if( obj.sub ) {
if(n4) subBit = obj.sub.document.height
else subBit = obj.sub.offsetHeight
}
else subBit = 0
expMenu(order)
}
else {
obj.opened = !obj.opened
frontOrder = null
if( obj.sub ) {
if(n4) obj.sub.visibility = "hidden"
else obj.sub.style.visibility = "hidden"
}
colMenu(order)
}
}
action_ID=null
function actionMenu(order) {
if( !loaded ) { return }
timeOrder = order
action_ID = setTimeout("clearTimeout(action_ID);actionMenu2(timeOrder)", 333)
}
function liMenu() {
var temp=tempSub=null
for( var i=1; i <= 12; i++) {
if(n4) {
temp = document.layers["D"+i]
tempSub = document.layers["D"+i+"Sub"]
if(tempSub) {
temp.sub = tempSub
temp.sub.top = temp.top + temp.document.height
}
}
else {
temp = document.all["D"+i]
tempSub = document.all["D"+i+"Sub"]
if(tempSub) {
temp.sub = tempSub
temp.sub.style.pixelTop = temp.style.pixelTop + temp.offsetHeight
}
}
}
}
function init() {
if( !(n4 || e4) ) { return }
if(e4) {
for(var i=1; i <= 12; i++) {
document.all["D"+i].style.posTop = 18 + (i-1) *20
}
}
liMenu()
loaded = true
}
n4=(document.layers)?1:0;
e4=(document.all)?1:0;
loaded = false
window.onload=init
liMenu() 함수 안의 12는 주 매뉴로 12개를
사용한다는 지정입니다. 7개를 사용할려면 7을 지정하면 됩니다.
매뉴의 크기에 관하여.. |
즉, 전체 주 매뉴의 좌표와 주 매뉴의 하위 매뉴 중에서 가장 큰 높이의 내용물을 가지는 하위 레이어의 높이가 한번에 다 보여줄 수 있는 크기입니다. 많은 주 매뉴를 사용할 때, 600x400 해상도의 높이 400을 기준으로 작성하면 해상도에 상관하지 않고 프레임에는 이동막대가 생기지 않는 페이지를 만들 수 있습니다.
이것은 속도도 빠르지만 사용자가 사이트의 전체적인 구조를 파악하기 쉽게 합니다.
이미지 바꾸기와 같이 사용하기 |
<div id=D1>
<a href="..."
onMouseOver="actionMenu(1); document.home.src='다른이미지.png'"
onmouseout="clearTimeout(action_ID); document.home.src='d1.gif'"
><img src="d1.gif" name="home"></a>
</div>
<div id=D1Sub>
<nobr><a href="...">D1 하위 링크 1</a></nobr>
</div>
먼저 이미지에 이름을 지어줍니다. 위의 name="home"입니다. 이름을 사용하지 않으면 복잡하고
나중에 페이지를 수정하면 에러가 날 가능성이 많습니다. 그리고 각 이벤트에 이미지 바꾸는 구문을 같이
넣어주면 됩니다. 위의 굵은 글자들이 이미지 바꾸기를 하기 위해서 지정한 구문입니다.
위에서는 "d1.gif" 이미지에 마우스를 가져가면 매뉴를 작동 시키고 "다른이미지.png" 이미지로 바꿉니다.
그리고 마우스를 다시 치우면 원래의 이미지인 "d1.gif" 이미지로 바꿉니다. 이미지 바꾸기의 자세한
사용법은 JavaScript-Image 페이지에 있습니다.