Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

nkdk의 세상

JS :: 팝업메뉴 본문

My Programing/HTML and JavaScript

JS :: 팝업메뉴

nkdk 2008. 6. 16. 10:36

CSS

  • (background)-color
    • menu : '화면배색'의 메뉴색상입니다.
    • highlight : '화면배색'의 선택항목색상입니다.
  • border
    • buttonhighlight : 메뉴스타일로 입체적으로 나온 스타일입니다.
  • line-height : 라인간격을 설정합니다. default는 1입니다.

JavaScript

  • event객체
    이벤트를 처리합니다.
    • srcElement : 이벤트가 발생한 객체를 반환합니다.
    • getAttribute("속성") : 해당객체의 속성값을 반환/설정합니다.
    • offsetX : 컨테이너를 기준으로 이벤트가 발생된 x좌표를 반환/설정합니다.
    • offsetY : 컨테이너를 기준으로 이벤트가 발생된 y좌표를 반환/설정합니다.
    • offsetParent : 해당 컨테이너를 가리킵니다.

<html>
<style type="text/css">
<!--

#popmenus {  // 팝메뉴스타일
cursor : default;
position : absolute;
width : 100px;
background-color : menu;
line-height : 1.4;
padding : 4px;
border : 2 outset buttonhighlight;
visibility : hidden;
}

#menuitems {  // 팝메뉴 항목 스타일
padding-left : 15px;
padding-right : 10px;
font-size : 9pt;
}

// -->
</style>
<script language="JavaScript">
<!--

function show_menu() {  // 우측/하단 여분길이계산, 필요시 커서좌측/상단출력
var rightedge = document.body.clientWidth - event.clientX;  // 우측여분
var bottomedge = document.body.clientHeight - event.clientY;  // 하단여분

if (rightedge < popmenus.offsetWidth) {  // 우측여분이 팝메뉴너비보다 작으면
  menuleft = document.body.scrollLeft + event.clientX - popmenus.offsetWidth;
  popmenus.style.left = menuleft;  // 커서x좌표에서 팝메뉴너비를 뺀 값을 팝메뉴x좌표로 할당
} else {
  popmenus.style.left = document.body.scrollLeft + event.clientX;
}

if (bottomedge < popmenus.offsetHeight) {  // 팝메뉴의 y좌표를 할당한다.(위와동일)
  menutop = document.body.scrollTop + event.clientY - popmenus.offsetHeight;
  popmenus.style.top = menutop
} else {
  popmenus.style.top = document.body.scrollTop + event.clientY;
}

popmenus.style.visibility = "visible";
return false;
}

function hide_menu() {  // 팝메뉴숨김
popmenus.style.visibility = "hidden";
}

function highlight() {  // 커서가 위치시 활성스타일로
if (event.srcElement.id == "menuitems") {
  event.srcElement.style.backgroundColor = "highlight";
  event.srcElement.style.color = "white";

  window.status = event.srcElement.url;
}
}

function lowlight() {  // 커서가 벗어나면 비활성스타일로
if (event.srcElement.id == "menuitems") {
  event.srcElement.style.backgroundColor = "";
  event.srcElement.style.color = "black";
  window.status = "";
}
}

function jumpto() {  // 항목클릭시 해당URL로 이동
if (event.srcElement.id == "menuitems") {
  if (event.srcElement.getAttribute("target") == null)
   window.location = event.srcElement.url;
  else
   window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
  }
}

// -->
</script>
<body>
마우스 오른쪽 버튼을 클릭하면 팝업메뉴가 나타납니다.<br>
<div id="popmenus" onmouseover="highlight()" onmouseout="lowlight()" onclick="jumpto()">

<div id="menuitems" url="http://www.naver.com/" target="win" style="width:100%;">네이버</div>
<div id="menuitems" url="http://www.google.co.kr">구글</div>

</div>
<script language="JavaScript">
<!--

document.oncontextmenu = show_menu;
document.body.onclick = hide_menu;

// -->
</script>

</body>
</html>

'My Programing/HTML and JavaScript' Related Articles more