메뉴 상자 3
../


[매뉴 상자 2]와 비슷한 동작을 합니다. 링크를 누르면 바로 상자를 열지 않고 상자가 이동하는 동작을 보여주는 것입니다. 열리고 있는 동작중에 링크를 누르면 열리는 동작에서는 닫는 동작을 하고 닫는 동작에서는 여는 동작으로 바뀝니다. 그래서 매뉴가 이동중에 링크를 눌러도 항상 같은 동작을 합니다. 매뉴 상자로 사용한 레이어는 아래입니다. 
#D1 { 
        position:absolute; width:200px; left:-180px; 
        top:0px; border:outset 2px white; 
        background-color:lightgreen; 
        layer-background-color:lightgreen
}
<div id=D1>
<table width=200 height=200>
<tr><td align="center">[ MENU ]</td>
<td>
	:
	:
</td></tr>
</table>
</div>
매뉴로 사용하는 레이어를 이동시키기 위해서는 레이어의 크기를 알아야 합니다. 이미지로 만들면 크기를 신경쓸 필요가 없지만 글자로 매뉴 레이어의 내용을 채운다면 <TABLE> 을 사용하여 매뉴의 내용을 채워야 일정한 크기를 예상할 수 있습니다. 이것도 확인을 하고 이동시킬 위치를 조정을 할 필요는 있습니다. 수치를 여러번 바꿔보면 적당한 동작이 나올것입니다.

이 예제는 매뉴를 이동시키는 링크를 매뉴안에 두었는데 이 링크로 매뉴를 이동시킵니다. 이 예제를 사용하기 위해서 조정해야 하는 것은 상자의 크기와 크기에 맞게 이동시킬 최종 이동 위치입니다. 

function menuOut() {

        if( document.D1.left < 0 ) { 

        if( D1.style.pixelLeft < 0 ) {
처음 링크를 누르면 매뉴를 나오게 하는 menuOut() 함수에서 < 0 은 매뉴가 왼쪽에서 나오므로 전부다 나오면 0까지 옵니다. 조금더 나오게 할려면 10으로 10pixel 더 나오게 할 수 있습니다. 다음은 매뉴를 들어가게 하는 menuIn()함수 입니다. 
function menuIn() {

        if( document.D1.left > -180 ) { 

        if( D1.style.pixelLeft > -180 ) {
여기서 -180을 지정한 이유는 매뉴가 다 들어가도 매뉴를 여는 링크를 보여주기 위해서 매뉴의 크기인 200에서 조금 작은 왼쪽으로 -180까지 이동시킵니다. 그래서 나오게 하는 위치는 0으로 지정해도 되지만 들어가게 하는 지정은 매뉴의 크기나 링크의 크기에 맞게 조절해야 합니다. 그래야 링크를 마우스로 다시 누를 수 있기 때문입니다.


T O P
 
[ MENU ]