Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Двухуровневое меню (https://javascript.ru/forum/misc/1859-dvukhurovnevoe-menyu.html)

Harouth 25.09.2008 18:02

Двухуровневое меню
 
Добрая время дня.
Не работает как надо. Помогите найти ошибки.
<html>
<head><title>Меню</title></head>
 <body>
<!--Таблицы, из которых строится меню-->
<!--===================================================================-->
 <table id=menu1 style="z-index:5; background:#e0e0e0; position:absolute;
 top:60px; left:250px; width:100"
 onclick=menuclick()
 onmouseover="document.all.tb1.style.display=''"
 onmouseout="document.all.tb1.style.display='none'"
 cellspacing=0 cellpadding=10 rules=none border=1>

<tbody>
<tr>
 <td id=menuzag1 style="background:aqua"
  onmouseover=onmousemenu()
  onmouseout=outmousemenu()>Иванов
 </td>
</tr>

<tbody id=tb1 style="display:none">
<!------------------------->
 <tr>
  <td id=e11 onmouseover=onelement() onmouseout=outelement()>Вася
  </td>
 </tr>
<!------------------------>
<tr>
  <td id=e12 onmouseover=onelement() onmouseout=outelement()>Вова
  </td>
 </tr>
<!------------------------>
<tr>
  <td id=e13 onmouseover=onelement() onmouseout=outelement()>Валера
  </td>
 </tr>
<!------------------------> 
</tbody>
  </table>
<!--===================================================================-->
<table id=menu2 style="z-index:5; background:#e0e0e0; position:absolute;
 top:60px; left:352px; width:100"
 onclick=menuclick()
 onmouseover="document.all.tb2.style.display=''"
 onmouseout="document.all.tb2.style.display='none'"
 cellspacing=0 cellpadding=10 rules=none width=40 border=1>

<tbody>
 <tr>
  <td id=menuzag2 style="background:#00FF00"
  onmouseover=onmousemenu()
  onmouseout=outmousemenu()>Петров
  </td>
 </tr>
 
<tbody id=tb2 style="display:none">
<!------------------------>
 <tr>
  <td id=e21 onmouseover=onelement() onmouseout=outelement()>Саша
  </td>
 </tr>
<!------------------------>
 <tr>
  <td id=e22 onmouseover=onelement() onmouseout=outelement()>Серега
  </td>
 </tr>
<!------------------------>
   </tbody>
  </table>
<!--===================================================================-->
<table id=menu3 style="z-index:5; background:#E0E0E0; position:absolute;
 top:60px; left:454px; width:100; bottom: 260px;"
 onclick=menuclick()
 onmouseover="document.all.tb3.style.display=''"
 onmouseout="document.all.tb3.style.display='none'"
 cellspacing=0 cellpadding=10 rules=none width=40 border=1>
 
<tbody>
<tr>
<td id=menuzag3 style="background:#00FF00"
 onmouseover=onmousemenu()
 onmouseout=outmousemenu()>Сидоров
     </td>
    </tr>
   </tbody> 
  </table>
 </body>

<script language=javascript>
function onelement(){//назад на элемент
xid=event.srcElement.id
document.all[xid].style.color='white'
document.all[xid].style.background='#0000ff'
}
function outelement(){//уход с элемента
xid=event.srcElement.id
document.all[xid].style.color='black'
document.all[xid].style.background='#e0e0e0'
}
function onmousemenu(){//назад на заголовок меню
xid=event.srcElement.id
document.all[xid].style.background='#00dd00'
}
function outmousemenu(){
xid=event.srcElement.id
document.all[xid].style.background='#00ff00'
}
function menuclick(){//щелчок на элементе меню
alert(""+event.srcElement.id+) if (){
window.open("http://www.yandex.ru")
}

</script> 

</html>

Octane 25.09.2008 18:14

Конструкция
document.all

не работает в FireFox, поэтому скрипт лучше переписать с нуля, используя стандартные методы DOM.

magistr_bender 25.09.2008 18:22

кстати по поводу document.all на что можно заменить?
я предпологаю что на document.body...... но неуверен... подскажите если не сложно)

ZoNT 25.09.2008 18:23

document.getElementById('id')

Maxx 16.12.2008 15:44

<script language="javascript">
function clickHandler(objClicked)
{
// имя класса элемента, который будет исчезать/появляться
var sNameClass = "menuLevelLinks";
var objElement;
var iI;
for (iI = 0; iI < objClicked.parentElement.children.length; iI++)
{
objElement = objClicked.parentElement.children[iI];
if (objElement.className == "menuLevelLinks")
objElement.style.display = (objElement.style.display == "none") ? "" : "none";
}
}
</script>

<!--
ОСНОВА СКРИПТА:
при нажатии на элемент (например, на ссылку),
в котором есть аттрибут onclick="return clickHandler(this);"
находится соседний (в одном родительском с ним элементе) элемент (например, div)
с аттрибутом class="menuLevelLinks" и отображается, если он скрыт (и, соответственно, наоборот)
-->

<div>
<a href="#" onclick="return clickHandler(this);">Важные сайты</a>
<div class="menuLevelLinks" style="display: none; position: relative; left: 20;">
<a href="http://kimsite.wallst.ru/htmlpad/">Htmlpad Fisherman</a>
<br><a href="http://www.yandex.ru">Яndex</a>
<br><a href="http://www.google.com">Google.com</a>
</div>
</div>

<div>
<a href="#" onclick="return clickHandler(this);">Развлечение</a>
<div class="menuLevelLinks" style="display: none; position: relative; left: 20;">
<a href="http://www.anekdotov.net">Анекдотов.net</a>
<br><a href="http://www.fomenko.ru">Фоменко.ру</a>
</div>
</div><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><head>
</head><body>
</body>

__________________________________________________ _

Вот эта вот конструкция работает только в Опере. А в остальных браузерах нет.
Не могли бы вы подсказать, что сделать чтобы работало.

Заранее благодарен

ZoNT 16.12.2008 16:12

Цитата:

Сообщение от Maxx
</div>
</div><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><head>
</head><body>
</body>

Допустим div - нога (единственное допущение).
head - голова
body - тело.

Читаем: нога, ещё нога, потом голова началась, потом тело... монстрик какой-то...


Часовой пояс GMT +3, время: 21:38.