Показать сообщение отдельно
  #3 (permalink)  
Старый 22.02.2011, 15:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Вариант ... добавлен scroll и px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
<style type="text/css">
 div.podmenu{
  border: 1px solid olive;
  padding: 7px;
  visibility: hidden;
  position: fixed;
  _position: absolute;
  background: white;
}
</style>

<script  type="text/javascript">
function getElementPosition(elemId)
{
    var elem = document.getElementById(elemId);

    var w = elem.offsetWidth;
    var h = elem.offsetHeight;

    var l = 0;
    var t = 0;

    while (elem)
    {
        l += elem.offsetLeft;
        t += elem.offsetTop;
        elem = elem.offsetParent;
    }

    return {"left":l, "top":t, "width": w, "height":h};
}
function getWindow(doc) {
    return doc.parentWindow || doc.defaultView;
}
function getDocumentScroll(doc) {
    doc = doc || document;
    var win = getWindow(doc);
    return [
        win.pageXOffset || doc.documentElement.scrollLeft || doc.body.scrollLeft || 0,
        win.pageYOffset || doc.documentElement.scrollTop  || doc.body.scrollTop  || 0
    ];
}


function list_over(el)
{
	pos = getElementPosition(el);
	var left = pos.left;
	var height = pos.height;
	var top = pos.top;
    var scroll = getDocumentScroll();
    var scrollLeft = scroll[0];
    var scrollTop =  scroll[1];

	document.getElementById('blok_1').style.left = left+"px";
	document.getElementById('blok_1').style.top = top+height-scrollTop+"px";
	document.getElementById('blok_1').style.visibility = 'visible';
}

function l_over()
{
	document.getElementById('blok_1').style.visibility = 'visible';
}

function list_out()
{
	document.getElementById('blok_1').style.visibility = 'hidden';
}
</script>
</head>

<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#" id="menu1" onmouseover="list_over('menu1')" onmouseout="list_out()">Ссылка первая</a>
<div id="blok_1" onmouseover="l_over()" onmouseout="list_out()" class="podmenu">
- <a href="1" class="url_none">111111</a><br>
- <a href="2" class="url_none">2222222</a><br>
- <a href="3" class="url_none">333333333</a>
</div>
<br /><br /><br /><br /><br />
</body>
</html>

Последний раз редактировалось рони, 22.02.2011 в 15:03.
Ответить с цитированием