Форум

AniStark · #1 (**permalink**) 03.04.2008, 13:11

Прикрутил себе на сайт выпадающее меню, но сбиваются координаты при изменении окна браузера =( (т.е. когда в браузере открываешь с боку закладки или избранное, выпадающие менюшки так сказать выпадают не там где нужно=\ )

помоги пожалуйста разобраться с этим:confused: !

Dmitry A. Soshnikov · #2 (**permalink**) 03.04.2008, 13:31

AniStark, пересчитывать координаты каждый раз при показе меню, а не единожды при инициализации.

AniStark · #3 (**permalink**) 03.04.2008, 13:39

честно говоря в JS очень плохо разбираюсь, не могли бы вы подсказать по подробнее?!

Dmitry A. Soshnikov · #4 (**permalink**) 03.04.2008, 15:17

AniStark,

- каждое меню представляется скрытым div'ом с абсолютным позиционированием (свойства стиля: display: none; position: absolute;);

- при определенном событии (onclick, onmouseover - не важно) этот div (меню) показывается и меняются значения свойств его стиля left (X координата) и top (Y координата) на нужные;

- "нужные значения координат" во втором пункте - это X и Y (left и top) координаты объекта, которому принадлежит меню.

Вот пример (в частности - как вычислять координаты объектов):

<html>
   <head>
      <title>This Just a test</title>
      <style type="text/css">
        .menu {
          position: absolute;
          width: 100px;
          height: 200px;
          background: #EEE;
          border: 1px solid #555;
          padding: 5px;
          display: none;
        }
      </style>
      <script type="text/javascript">
        
        function init() {
          document.getElementById('test').onclick = function() {
            document.getElementById('menu1').style.top = getPosY(this) + (this.offsetHeight || this.style.height) + 'px';
            document.getElementById('menu1').style.left = getPosX(this) + 'px';
            document.getElementById('menu1').style.display = 'block';
            return true;
          };
          return true;
        }

        function getPosX(obj) {
          var curleft = 0;
          if (obj.offsetParent) {
            while (obj.offsetParent) {
              curleft += obj.offsetLeft;
              obj = obj.offsetParent;
            }
          }
          return curleft;
        }

        function getPosY(obj) {
          var curtop = 0;
          if (obj.offsetParent) {
            while (obj.offsetParent) {
              curtop += obj.offsetTop;
              obj = obj.offsetParent;
            }
          }
          return curtop;
        }

      </script>
   </head>
   <body onload="init()">
     <div class="menu" id="menu1">
       <li> point 1
       <li> point 2
       <li> point 3
       <li> point 4
       <li> point 5
     </div>
     <input type="text" id="test" />
   </body>
</html>

AniStark · #5 (**permalink**) 03.04.2008, 16:35

потыкавшись сомостоятельно исправить не получилось

...

вот сам скрипт, он вынесен в отдельный файл menu.js:

<!--
function mouseOverPopup (obj) {
obj.style.backgroundColor='#74B3D3';
obj.className='';
}
function mouseOutPopup (obj) {
obj.style.backgroundColor='#fafafa'
obj.className='p_menu';
}
function MM_reloadPage(init) { if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function P7_autoLayers() { var g,b,k,f,args=P7_autoLayers.arguments;
var a = parseInt(args[0]);if(isNaN(a))a=0;
if(!document.p7setc) {p7c=new Array();document.p7setc=true;
for (var u=0;u<10;u++) {p7c[u] = new Array();}}
for(k=0; k<p7c[a].length; k++) {
if((g=MM_findObj(p7c[a][k]))!=null) {
b=(document.layers)?g:g.style;b.visibility="hidden";}}
for(k=1; k<args.length; k++) {
if((g=MM_findObj(args[k])) != null) {
b=(document.layers)?g:g.style;b.visibility="visible";f=false;
for(j=0;j<p7c[a].length;j++) {
if(args[k]==p7c[a][j]) {f=true;}}
if(!f) {p7c[a][p7c[a].length++]=args[k];}}}
}
//-->

и вот то что пренадлежит меню в html коде:

<head><SCRIPT language=javascript src="menu.js"></SCRIPT>
</head>
<body><table border="0" cellspacing="0" cellpadding="0">
<td><a href="link3.htm" onmouseover=P7_autoLayers(0)><img src="img/k1.gif"  border="0" onmouseover="this.src=menu[0].src" 

onmouseout="this.src='img/k1.gif'"></a>
</td>
<td><a href="link1.htm" ONMOUSEOVER=P7_autoLayers(0,'msa','Closer')><img src="img/k2.gif"  

border="0"onmouseover="this.src=menu[1].src" onmouseout="this.src='img/k2.gif'"></a>
</td>
<td><a href="link1.htm" ONMOUSEOVER=P7_autoLayers(0,'msd','Closer')><img src="img/k3.gif"  

border="0"onmouseover="this.src=menu[2].src" onmouseout="this.src='img/k3.gif'"></a>
</td>
<td><a href="link3.htm" onmouseover=P7_autoLayers(0)><img src="img/k4.gif"  border="0"onmouseover="this.src=menu[3].src" 

onmouseout="this.src='img/k4.gif'"></a>
</td>
<td><a href="link3.htm" onmouseover=P7_autoLayers(0)><img src="img/k5.gif"  border="0"onmouseover="this.src=menu[4].src" 

onmouseout="this.src='img/k5.gif'"></a>
</td>
<td class="td1" width="100%" class="td1" onmouseover=P7_autoLayers(0)>&nbsp;
</td>
</tr>
</table>

<div id=msa style="Z-INDEX: 9; LEFT: 223px; VISIBILITY: hidden; WIDTH: 80px; POSITION:absolute; TOP: 146px; HEIGHT: 45px">
<table width=90 border=0 bgcolor=#0199CC><tr><td><a href="#">Состав</a></td></tr>
<tr><td><a href="#">История</a></td></tr><tr><td><a href="#">Поля</a></td></tr></table></div>

<div id=msd style="Z-INDEX: 9; LEFT: 313px; VISIBILITY: hidden; WIDTH: 109px; POSITION:absolute; TOP: 146px; HEIGHT: 45px">
<table width=109 border=0 bgcolor=#0199CC><tr><td><a href="#">Бамбардиры</a></td></tr>
<tr><td><a href="#">Таблица</a></td></tr><tr><td><a href="#">Остальное</a></td></tr></table></div>
</body>

я конечно, не много лишнего взял, но постарался ни чего не упустить)

если у вас есть возможность подскажите, что нужно исправить, чтоб менюшка коректно работала:confused: ?!

lancer · #6 (**permalink**) 03.04.2008, 19:08

AniStark, а Вас и не получится. Чтобы понимать, нужно написать это меню самому. А пока что нашли в инете дурацкое и длинное решение на таблицах и пытаетесь сию жесть вразуметь.

SelenIT · #7 (**permalink**) 04.04.2008, 01:24

AniStark, этому решению никак не меньше 9-10 лет. Те браузеры, под которые оно затачивалось, давно вымерли - вместе с соотв. техникой верстки.

В наши дни принято верстать меню вложенными списками. Тогда в простейшем случае достаточно указать для пунктов верхнего уровня position:relative, для вложенного списка position: absolute; left: 0; top: <высота_меню> (для гориз. меню, для вертикального - top: 0, left: <ширина>) и по onmouseover/onmouseout на LI менять его display. Ничего пересчитывать не надо, координаты и так привязываются к родительскому элементу. А то можно и вовсе одним CSS обойтись :-).

AniStark · #8 (**permalink**) 04.04.2008, 11:35

lancer,понимать мне это не нужно, во всяком случае пока не когда понимать, мне необходимо найти просто решение для меню, к сожалению в инете ни чего достойней найти не смог.

SelenIT,не могли бы вы дать ссылку на код похожего, но более современного меню.

Сам написать не смогу, так как знаю js очень поверхностно.

ЗЫ необходимо вертикальное меню.

tenshi · #9 (**permalink**) 08.04.2008, 12:09

не задавай ни left, ни top, а рули margin-left и margin-top.

AniStark · #10 (**permalink**) 11.04.2008, 14:13

tenshi,
спасибо! разобрался как делать с помощью CSS.

Форум

Справочник

Discord чат

Курсы javascript