Выпадающее меню

Russel · July 25, 2007

Пытаюсь написать скрипт, который бы позволял при наведении на определ?нный объект показывать на этом объекте меню. Делаю 2мя путями-через mouseover и через абсолютное позиционирование. Меню появляется, но пользоватся им нельзя, так как нижняя кромка меню ниже объекта, на котором оно открывается. Не подскажете как его зафиксировать. Или может вообще есть у когото пример готовых меню такого плана, то это моя перевая программа на javascrit-сложновато пока, но нужно?

<html>
<head>
<title> </title>
<script>
function getXY(obj) 
 {
 var x=0, y=0;
 while(obj) 
 {
 x+=obj.offsetLeft;
 y+=obj.offsetTop;
 obj=obj.offsetParent;
 }
 return { x: x, y:y};
 }
var menu;
function w()
//Для теста определяем параметры кликательной области
{
d = document.getElementById("block2");
topPos = d.offsetheight;
alert(document.getElementById("block2").offsetLeft);
}
function show()
{
var saved_ex=ex;
do
{
document.getElementById("q").style.top=80;
document.getElementById("q").style.left=saved_ex;
document.getElementById("q").style.display="block";
/*menu=getXY(document.getElementById("q"));*/
}
while(document.getElementById("q").onmouseover)
return 0;
}
function hide()
{
menu=getXY(document.getElementById("q"));
if(document.getElementById("block2").onmouseout && ex>menu.x && ey>menu.y)
{
document.getElementById("q").style.display="block";
}
else
{
document.getElementById("q").style.display="none";
}
return 0;
}

//Инициализация координат мыши
var ex=0, ey=0;
//Ищем мышь
function A(mEvent) {
ex=mEvent.clientX;
ey=mEvent.clientY;
//Для теста выводим е? положение
document.getElementById("vvv").innerHTML="x= "+ex+"; y= "+ey;
//Смотрим где координаты мыши и скрываем/показываем меню
}
</script>
<style type="text/css">
* {
 margin:0;
 padding:0;
}
html, body {
 margin:0;
 padding:0;
 width:100%;
 height:100%;
}
body {
 font-family: Verdana, Arial, sans-serif;
 font-size: 62.5%;
 color: #000;
 background: #fff;
}
#block2 {
 position: absolute; 
 top: 60px; left: 0; width:100%; height: 40px;
 border:1px #ccc solid;
 }
#q{ 
border:1px #f00 solid; 
display:none;
position: absolute; 
left:50px;
background:#fcc;
padding:10px;
padding-left:25px;
/*text-indent:10px;*/
}
</style>
</head>
<body onMouseMove="java script:A(event);", onLoad="java script:hide();">
<h1 id="vvv" style="margin-left:300px;"> </h1>
<div id="q" style="z-index:2;">
<ul id="nav"> 
 <li><a href="#">Synonym</a> 
 <ul> 
 <li><a href="#">Terms</a></li>
 </ul> 
 </li> 
 <li><a href="#">Link reciever</a> 
 <ul> 
 <li><a href="#">Query</a></li> 
 <li><a href="#">Search Engine</a></li> 
 <li><a href="#">Engine Instance</a></li>
 <li><a href="#">Static</a></li> 
 <li><a href="#">Link</a></li>
 </ul> 
 </li> 
 <li><a href="#">Doc Reciever</a> 
 <ul> 
 <li><a href="#">Document Engine</a></li> 
 <li><a href="#">Engine Instance</a></li> 
 <li><a href="#">Static</a></li> 
 <li><a href="#">Domain</a></li> 
 <li><a href="#">Document</a></li> 
 <li><a href="#">Mail Account</a></li> 
 <li><a href="#">Mail</a></li> 
 <li><a href="#">Download Service</a></li> 
 </ul> 
 </li> 
 <li><a href="#">Task Manager</a> 
 <ul> 
 <li><a href="#">Engine Instance</a></li> 
 <li><a href="#">Task</a></li> 
 <li><a href="#">Task Template</a></li> 
 </ul> 
 </li> 
 <li><a href="#">Report</a> 
 <ul> 
 <li><a href="#">Report</a></li> 
 </ul> 
 </li> 
</ul> </div>
<a href="#" onMouseOver="java script:show();", onMouseOut="java script:hide();"><div id="block2" style="z-index:3;"></div></a>
</body>
</html>

IgorK2000 · August 7, 2007

Привет!

У тебя нет еще одного события, по команде которого это меню "приклеивалось".

Подумай над этим....

Maslakoff · August 7, 2007

Заведи небольшую переменную layer_over, кпримеру. Когда поподаеш на слой меню, то onmouseover="layer_over = true;"

Проверяй эту переменную, когда хочеш уйти из менюшки...

Sign In

Выпадающее меню

Question

Russel

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

IgorK2000

Link to comment

Share on other sites

Maslakoff

Link to comment

Share on other sites

Обсуждения

Forums

Important Information