Пытаюсь написать скрипт, который бы позволял при наведении на определ?нный объект показывать на этом объекте меню. Делаю 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>
