Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.09.2008, 18:02
Новичок на форуме
Отправить личное сообщение для Harouth Посмотреть профиль Найти все сообщения от Harouth
 
Регистрация: 25.09.2008
Сообщений: 1

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

Последний раз редактировалось Harouth, 25.09.2008 в 18:07.
Ответить с цитированием
  #2 (permalink)  
Старый 25.09.2008, 18:14
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

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

не работает в FireFox, поэтому скрипт лучше переписать с нуля, используя стандартные методы DOM.
Ответить с цитированием
  #3 (permalink)  
Старый 25.09.2008, 18:22
Кандидат Javascript-наук
Отправить личное сообщение для magistr_bender Посмотреть профиль Найти все сообщения от magistr_bender
 
Регистрация: 07.09.2008
Сообщений: 133

кстати по поводу document.all на что можно заменить?
я предпологаю что на document.body...... но неуверен... подскажите если не сложно)
Ответить с цитированием
  #4 (permalink)  
Старый 25.09.2008, 18:23
Флудер
Отправить личное сообщение для ZoNT Посмотреть профиль Найти все сообщения от ZoNT
 
Регистрация: 25.07.2008
Сообщений: 1,271

document.getElementById('id')
Ответить с цитированием
  #5 (permalink)  
Старый 16.12.2008, 15:44
Maxx
 
Сообщений: n/a

<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>

__________________________________________________ _

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

Заранее благодарен
Ответить с цитированием
  #6 (permalink)  
Старый 16.12.2008, 16:12
Флудер
Отправить личное сообщение для ZoNT Посмотреть профиль Найти все сообщения от ZoNT
 
Регистрация: 25.07.2008
Сообщений: 1,271

Сообщение от Maxx
</div>
</div><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><head>
</head><body>
</body>
Допустим div - нога (единственное допущение).
head - голова
body - тело.

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выпадающее меню SunYang Общие вопросы Javascript 3 16.04.2009 22:18
Проблемы с меню на JS SeeD Общие вопросы Javascript 5 21.11.2008 19:44
Нужен скрипт меню управляемого клавишами agnitumus Элементы интерфейса 4 01.10.2008 10:11
помогите с меню Ribt Общие вопросы Javascript 0 20.09.2008 08:11
Помогите сделать простое меню debugger Элементы интерфейса 1 09.09.2008 23:14