메뉴 상자 2
../


가장 간단한 동작으로 작동하는 매뉴입니다. 링크를 누르면 다른 페이지로 이동하는 링크들을 가지고 있는 매뉴를 열고 다시 누르면 닫는 매뉴로 가장 간단하게 만든 것입니다. 아래는 MENU 글자를 누르면 나오는 매뉴 상자입니다. 페이지 맨 위에 있는 MENU 링크를 누르면 나옵니다. 
<style>
#D1{ 
        position:absolute; width:200px; 
        left:0px; top:0px; visibility:hidden; 
        border: outset 2px white; 
        background-color:lightgreen; 
        layer-background-color:lightgreen
}
</style>

<div id=D1>
<ul>
<li><a href="#"><img src="./images/bb1.jpg" border=0 alt=""></a></li>
<li><a href="#"><img src="./images/bb2.jpg" border=0 alt=""></a></li>
<li><a href="#"><img src="./images/bb3.jpg" border=0 alt=""></a></li>
<li><a href="#"><img src="./images/bb4.jpg" border=0 alt=""></a></li>
<li><a href="#"><img src="./images/bb5.jpg" border=0 alt=""></a></li>
</ul>
</div>
로 링크를 가지고 있는 매뉴를 만들고 처음에는 보이지 않게 visibility:hidden을 지정합니다. 페이지 출력후에 링크로 이것을 보여줍니다. left, top좌표는 항상 0, 0으로 나오므로 아무데나 지정해도 됩니다. 다음은 매뉴를 여는 링크입니다. 
#menu {
        position:absolute; left:0px; top:0px; width:100px; 
        border: solid 1px red; background-color: lightgreen; 
        font-size:9pt; font-weight:bold; color:green; padding:2px; 
}

<div id=menu><a href="#" onClick="showMenu()">M E N U</a></div>
위의 링크로 매뉴를 여는것과 동시에 자신의 위치도 열린 매뉴와 바로 밑에 두기 위해서 position:absolute 로 지정합니다. 이 링크를 가지로 있는 id=menu 레이어는 매뉴가 열리면 매뉴 바로 아래에 위치합니다. 그리고 다시 누르면 원래의 위치로 돌립니다. 아래가 이것을 하는 함수 showMenu() 입니다. 
function showMenu() {
    if(document.layers) { 
        if(document.D1.visibility == "hidden" || document.D1.visibility == "hide") { 
            document.D1.visibility = "visible"
            document.menu.top = document.D1.document.height
        }
        else {
            document.D1.visibility = "hidden"
            document.menu.top = 0
        }
    }
    else if(document.all) { 
        if( D1.style.visibility != "visible" ) { 
            D1.style.visibility = "visible"
            menu.style.pixelTop = D1.offsetHeight
        }
        else {
            D1.style.visibility = "hidden"
            menu.style.pixelTop = 0
        }
    }
}
가장 먼저 실행하는 것은 매뉴를 가지고 있는 레이어가 열려있는지 아니면 숨었는지를 확인하고 숨었으면 열고 열렸으면 다시 감춥니다. 매뉴가 visibility:hidden으로 숨어 있으면 'visible'로 보여주고 매뉴의 크기만큼 링크 레이어의 위치를 지정해 줍니다. 반대의 경우는 감추고 링크 레이어를 원래의 위치 0을 지정합니다. 그래서 링크를 한번 누름에 따라서 보여주고 닫는 동작을 합니다.

여기서는 여러 링크를 가지고 있는 매뉴 상자 레이어의 크기는 상관 없습니다. 그 크기로 매뉴 상자를 여는 레이어를 상자 바로 아래에 두기 때문입니다.


 



T O P