mouseout에 사라지는 팝업메뉴의 코드와 사용 예

popupMenu 클래스

popupMenu.js 파일 보기

메뉴와 핫스팟을 위한 마컵

<span id="hotspot1" class="hotspot">팝업메뉴</span>
<div id="popupMenu1" class="popupMenu">
	<ul>
		<li>아이템1</li>
		<li>아이템2</li>
		<li>아이템3</li>
	</ul>
</div>

<span id="hotspot2" class="hotspot">또 다른 팝업메뉴</span>
<div id="popupMenu2" class="popupMenu">
	<ul>
		<li><a href="http://yahoo.com">야후</a></li>
		<li><a href="http://google.com">구글</a></li>
		<li><a href="http://naver.com">네이버</a></li>
	</ul>
</div>
	

메뉴와 핫스팟을 위한 스타일

.hotspot {
	cursor: pointer;
	font-weight: bold;
	font-size: 1.5em;
	border: 2px solid #cccccc;
}

.popupMenu {
	position:absolute;
	left: -1000px;
	width: 200px;
	padding: 0px 10px;
	background-color: #cccccc;
	border: 2px solid #cccccc;
}
	

popupMenu.js 사용을 위한 자바스크립트

<script src="popupMenu.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
	var popupMenu1;
	var popupMenu2;
	window.onload = function()
	{
		popupMenu1 = new PopupMenu($("hotspot1"), $("popupMenu1"));
		popupMenu2 = new PopupMenu($("hotspot2"), $("popupMenu2"));
	}
// -->	
</script>
	

실행 예

계속되는 컨텐츠
블라 blah 블라 blah 블라 blah 블라 blah 블라 blah 블라 blah 블라 blah 블라 blah
블라 blah 블라 blah 블라 blah 블라 blah 블라 blah 블라 blah 블라 blah 블라 blah