<div class="mBox" style="left:0px;top:0px;width:160px; height:20px;" onMouseover="viewMenu('pMenu1')">
■会社案内
</div>
<div class="pBox" id="pMenu1" style="left:0px;top:20px;width:160px;height:50px;">
<a href="a.html"> 社長挨拶</a><br>
<a href="b.html"> 会社概要</a><br>
<a href="c.html"> 社 史</a><br>
<br>
</div>
<div class="mBox" style="left:160px;top:0px;width:160px; height:20px;" onMouseover="viewMenu('pMenu2')">
■サポート
</div>
<div class="pBox" id="pMenu2" style="left:160px;top:20px;width:160px;height:50px;">
<a href="d.html"> サポート</a><br>
<a href="e.html"> ダウンロード</a><br>
<a href="f.html"> お問い合わせ</a><br>
</div>
</body>
</html>
●pmenu.jsファイル
var gCurrentMenuID = null;
function viewMenu(objID) // メニュー表示
{
hideMenu();
document.getElementById(objID).style.visibility = "visible";
gCurrentMenuID = objID;
}
function hideMenu() // メニュー非表示
{
for (var i=1; i<=maxMenu; i++) document.getElementById("pMenu"+i).style.visibility = "hidden";
gCurrentMenuID = null;
}
function checkOut(evt) // 項目範囲外か調べる
{
if (gCurrentMenuID)
{
if (document.all)
{
var X = event.x;
var Y = event.y;
}else{
var X = evt.pageX;
var Y = evt.pageY;
}
var obj = document.getElementById(gCurrentMenuID);
var sx = parseInt(obj.style.left);
var sy = parseInt(obj.style.top) - mHeight;
var ex = sx + parseInt(obj.style.width);
var ey = sy + parseInt(obj.style.height) + mHeight;
if ((X < sx) || (Y < sy) || (X > ex) || (Y > ey)) hideMenu();
}
}
document.onmousemove = checkOut;