میتونی از تابع زیر استفاده کنی که موقعیت شی فرزند رو نسبت به پدرش بدست میاره .
در واقع از شی اصلی اون قدر ادامه میده تا به body برسه و مجموع فاصله ها رو با هم جمع می کنه .
function getElementPosition(elemID) {
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
return {left:offsetLeft, top:offsetTop};
}
برنامه میتونه به صورت زیر باشه .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
function getElementPosition(elemID) {
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
return {left:offsetLeft, top:offsetTop};
}
function test()
{
//alert($('d1').offsetLeft);
offset = getElementPosition('d1');
// alert(offset.left+','+offset.top);
d1 = $('d1');
mn = $('m1');
mn.style.top =parseInt(d1.style.height)+offset.top+5+'px';
mn.style.left =offset.left+'px';
if(mn.style.display=='block')
mn.style.display='none';
else
mn.style.display='block';
}
</script>
<div id="m1" style="width:150px; background:pink; position:absolute;top:0px; left:0px; display:none;">
<table border="1" cellspacing="5" cellpadding="5">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<input type="button" onclick="test()" value="clickME" />
<table width="200" border="1" cellspacing="5" cellpadding="5" align="center">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td><div style="height:150px; width:150px; background:gold;" id="d1" onmouseover="test()" onmouseout="test()"></div></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
میشه راهنماییم کنیید چه جوری یه منوی استاندارد بسازم.
نقل قول: ساختن منوی افتادنی با CSS
قوانین ایجاد تاپیک در تالار
پاسخ با نقل قول