Двухуровневое меню
Добрая время дня.
Не работает как надо. Помогите найти ошибки.
<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>
|
Конструкция
document.all не работает в FireFox, поэтому скрипт лучше переписать с нуля, используя стандартные методы DOM. |
кстати по поводу document.all на что можно заменить?
я предпологаю что на document.body...... но неуверен... подскажите если не сложно) |
document.getElementById('id')
|
<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> __________________________________________________ _ Вот эта вот конструкция работает только в Опере. А в остальных браузерах нет. Не могли бы вы подсказать, что сделать чтобы работало. Заранее благодарен |
Цитата:
head - голова body - тело. Читаем: нога, ещё нога, потом голова началась, потом тело... монстрик какой-то... |
| Часовой пояс GMT +3, время: 07:04. |