Двухуровневое меню
Добрая время дня.
Не работает как надо. Помогите найти ошибки. <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, время: 21:38. |