| gavnomaster |
24.05.2010 13:56 |
Выпадающее меню
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<style type="text/javascript">
</style>
<style type="text/css">
.a {display: inline; border: solid 1px;}
.b {border: solid 1px; width: 220px; display: none;}
</style>
<script type="text/javascript">
function findPos(obj) {
var curleft = 0;
var curbottom = obj.offsetHeight;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curbottom += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return [curleft, curbottom];
}
function $(id) {
return document.getElementById(id);
}
function s(obj, par_obj) {
obj.style.display = "block";
obj.style.position = "absolute";
dim = findPos(par_obj);
obj.style.left = dim[0];
obj.style.top = dim[1];
}
function hide(obj) {
obj.style.display = "none";
obj.style.left = obj.style.top = 0;
}
</script>
<div id="menu">
<table>
<tr>
<td id="a1" class="a" onmouseover="javascript: s($('b1'), $('a1'));" onmouseout="javascript: hide($('b1'));">Пункт1 ►</td>
<td id="a2" class="a" onmouseover="javascript: s($('b2'), $('a2'));" onmouseout="javascript: hide($('b2'));">Пункт2 ►</td>
<td id="a3" class="a" onmouseover="javascript: s($('b3'), $('a3'));" onmouseout="javascript: hide($('b3'));">Пункт3 ►</td>
</tr>
</table>
<div id="b1" class="b">
<ul>
<li><a href="#">Ссылка 1.1</a></li>
<li><a href="#">Ссылка 1.2</a></li>
<li><a href="#">Ссылка 1.3</a></li>
</ul>
</div>
<div id="b2" class="b">
<ul>
<li><a href="#">Ссылка 2.1</a></li>
<li><a href="#">Ссылка 2.2</a></li>
<li><a href="#">Ссылка 2.3</a></li>
</ul>
</div>
</div>
<p>Текст.</p>
<script type="text/javascript">
// dim = findPos($('a2'));
// alert(dim);
</script>
</body>
</html>
Помогите доделать... |