| M E N U |
|
|
| ||
|
메뉴 상자 5 | ../ |
function init() {
menu.top = menu.document.height*-1+20
D1.style.pixelTop = D1.offsetHeight*-1+20
브라우저의 왼쪽면에서 동작하는 [매뉴상자 4]나 윗면에서 동작하는 이 예제는 매뉴로 사용할 레이어의
크기를 자동으로 계산하여 알맞은 위치로 배치합니다. 페이지가 다 출력이 되면 가장 먼저
실행하는 함수 init() 안에 보면 위의 구문이 있습니다. 여기서 20도 전 예제에서 말한 것처럼 마우스로 매뉴를
동작시키는 보이는 부분의 크기입니다. 여기서도 20은 이용도로 사용됩니다. 매뉴 레이어의 크기는
알아서 배치하지만 이것의 크기는 원하는대로 지정하세요.
그리고 처음 style로 left, top의 값도 조절하면 그 위치에서 상하나 좌우로 움직입니다. 좌우로 움직이는 예제에서는 top값을 조정하여 위치시키고 아래위로 움직이는 예제에서는 left의 style 값을 지정하여 배치를 할 수 있습니다.
그리고 이 예제 매뉴의 left, top style 값은 left:0; top:-500px; 으로 지정했습니다. top:-500로 지정하였는데 이것은 처음에는 보이지 않게 하기 위해서 입니다. visibility를 사용할 수도 있지만 이렇게 해도 보이지 않는 것은 마찬가지니까요.. visibility: hidden으로 지정하면 다시 JavaScript로 visible로 지정해 주어야 하지만 이것은 그렇게 할 필요가 없기 때문에 이렇게 했습니다.
이 페이지의 매뉴를 사용하여 웹페이지를 문서가 아닌 동작하는 페이지로 만들 수 있습니다.
| M E N U |
|
|
|
| ||
