마우스 오른쪽 단추 매뉴 1

RightButton_Menu 1 / RightButton_Menu 2 / RightButton_Menu 3

마우스 오른쪽 단추를 누르면 자동으로 나오는 매뉴는 마우스를 누른 위치를 기준으로 해서 오른쪽 아래에 나옵니다. 매뉴로 만들어서 사용하면 이 위치를 조정할 수 있습니다. 간단한 방법입니다. 나오는 매뉴에서 알맞게 위치시킬 곳을 수동으로 더 해주면 됩니다. 왼쪽으로 100px, 위로 100px를 이동시킬려면 left, top에 이 값을 빼주면 됩니다. 아래로 말이죠..

function myMenu(e) {
  if (document.layers && document.rightMenu) { 
    if (e.which == 1) {
      setTimeout('document.rightMenu.visibility = "hidden"', 111)
    }
    else if (e.which == 3) {
      document.rightMenu.left = e.pageX - 100
      document.rightMenu.top = e.pageY - 100
      document.rightMenu.visibility = "visible";

      return false; 
  }
}
else if (document.all && document.all.rightMenu) {
    if (event.button == 1) {
      setTimeout('rightMenu.style.visibility = "hidden";', 111); 
    }
    else if (event.button == 2) {
      rightMenu.style.posLeft = event.clientX + document.body.scrollLeft - 100
      rightMenu.style.posTop = event.clientY + document.body.scrollTop - 100 	
      rightMenu.style.visibility = "visible";
      rightMenu.focus(); 
    }
  }
}

위의 굵은 글자들로 매뉴를 약간 조정합니다. 그러면 넓이 200px, 높이 200px의 크기를 가지는 매뉴는 마우스를 누르자 마자 바로 마우스 아래에 매뉴가 중앙에 놓이게 됩니다. 그래서 링크들을 누르기가 편합니다. 근데 나중에 링크들을 하나 추가하거나 삭제하면 매뉴의 넓이가 달라집니다. 그래서 다시 수정해야 합니다.

매뉴의 크기에 신경쓰지 않고 중앙으로 정열하기 위해서는 [페이지와 레이어의 크기] 의 방법으로 레이어의 크기를 계산하여 지정해 주면 됩니다. 그래서 아래가 되겠죠.

function myMenu(e) {
  if (document.layers && document.rightMenu) { 
    if (e.which == 1) {
      setTimeout('document.rightMenu.visibility = "hidden"', 111)
    }
    else if (e.which == 3) {
      document.rightMenu.left = e.pageX - document.rightMenu.document.width /2
      document.rightMenu.top = e.pageY - document.rightMenu.document.height /2
      document.rightMenu.visibility = "visible";

      return false; 
  }
}
else if (document.all && document.all.rightMenu) {
    if (event.button == 1) {
      setTimeout('rightMenu.style.visibility = "hidden";', 111); 
    }
    else if (event.button == 2) {
      rightMenu.style.posLeft = event.clientX + document.body.scrollLeft - rightMenu.offsetWidth/2
      rightMenu.style.posTop = event.clientY + document.body.scrollTop - rightMenu.offsetHeight/2 	
      rightMenu.style.visibility = "visible";
      rightMenu.focus(); 
    }
  }
}

RightButton_Menu 1 / RightButton_Menu 2 / RightButton_Menu 3

[T O P]