| |
|
|
| | Здравствуйте. Я сделал меню, и возникает проблема: при наведении на меню курсора мыши, то ячейка подменю остается без текста.
Вот код страницы:
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<TITLE>menu</TITLE>
<style>
<!--
.sub { background-color: #0000ff; width: 50px; height: 25px; position: static}
.menu { background-color: #00ff00; width: 50px; height: 25px}
-->
</style>
<SCRIPT language="JavaScript">
<!--
function hide(menu)
{
var i=1;
while(i <= 3)
{
var sub = 'sub'+i;
if(sub != menu)
{
document.all[sub].style.display = "none";
}
++i;
}
}
function on(menu, sub)
{
var i = 'sub'+menu;
hide(i);
var submenu = 'sub'+sub;
var i_sub = 1;
while(i_sub <= 3)
{
var i_i_sub1 = 2;
while(i_i_sub1 <= 3)
{
var i_i_i_sub = i_sub+'_'+i_i_sub1;
var sub1 = 'sub'+i_i_i_sub;
if(sub1 != submenu)
{
document.all[sub1].style.display = "none";
}
++i_i_sub1;
}
++i_sub;
}
document.all[submenu].style.display = "";
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="hide()">
<div class=menu style="position: absolute; left: 70px; top: 30px" onMouseover="on('1', '1')">menu1</div>
<div id=sub1 style="position: absolute; left: 120px; top:30px">
<div class=sub>submenu1</div>
<div class=sub onMouseover="on('1', '1_2')">submenu2</div><div id=sub1_2 class=sub style="position: absolute; left: 60px; top: 24px">submenu2_1</div>
<div class=sub onMouseover="on('1', '1_3')">submenu3</div><div id=sub1_3 class=sub style="position: absolute; left: 60px; top: 49px">submenu3_1</div>
</div>
<div class=menu style="position: absolute; left: 70px; top: 55px" onMouseover="on('2', '2')">menu2</div>
<div id=sub2 style="position: absolute; left: 120px; top:55px">
<div class=sub>submenu1</div>
<div class=sub onMouseover="on('2', '2_2')">submenu2</div><div id=sub2_2 class=sub style="position: absolute; left: 60px; top: 24px">submenu2_1</div>
<div class=sub onMouseover="on('2', '2_3')">submenu3</div><div id=sub2_3 class=sub style="position: absolute; left: 60px; top: 49px">submenu3_1</div>
</div>
<div class=menu style="position: absolute; left: 70px; top: 80px" onMouseover="on('3', '3')">menu3</div>
<div id=sub3 style="position: absolute; left: 120px; top:80px">
<div class=sub>submenu1</div>
<div class=sub onMouseover="on('3', '3_2')">submenu2</div><div id=sub3_2 class=sub style="position: absolute; left: 60px; top: 24px">submenu2_1</div>
<div class=sub onMouseover="on('3', '3_3')">submenu3</div><div id=sub3_3 class=sub style="position: absolute; left: 60px; top: 49px">submenu3_1</div>
</div>
</BODY>
</HTML>
|
Я прикрепил рисунок с изображением меню. Помогите пожалуйста найти ошибку. Заранее спасибо. | |
| |
|
|
| |
|
|
| |
для: Георгий
(13.02.2006 в 20:56)
| | | Почему - не разобрался (подозрительно и непонятно действие position: static), но заметил, что hide() работает над первым уровнем, а не над всеми. Если же на под-подменю подействовать .style.display = "none" блужданием по ним, оно не появится. Следовательно, если hide() будет по всем подменю, то начнёт работать. А вообще, не очень ясно написано, и скрывать ветви можно скрыванием обрамляющего элемента, а не бегать по всем подменю для этого. Код должен получиться значительно компактнее. | |
| |
|
|
| |
|
|
| |
для: 12345
(13.02.2006 в 23:34)
| | | Я решил новый код для меню делать. Он будет "пробегать" по всем пунктам. И я сделаю так что бы легче было добавлять новые пункты. "position: static" - это для того что бы кординаты объекта указывать относительно. Когдато здесь можно было скачать ееню такого типа, и от туда я взял - "position: static". | |
| |
|
|
| |
|
|
| |
для: Георгий
(14.02.2006 в 09:38)
| | | Хорошо, что новый код, но ещё раз отмечу, что лучше обойтись без пробеганий. Делаете каждое вложенное меню в своём диве со свойством absolute.
Типа такого. Но пробегать на закрывание лишнего придётся по дочерним нодам.
<style>.me{position:absolute;display:none;width:200;background-color:#eeeeee;border:1px solid gray;padding:0 2;}
.me2{display:inline;}
</style>
<span if=mainMenu class=me style=display:block onmouseover=mov() onclick=mot()>menu
<span class=me>podmenu<br>
<span class=me2>
1
</span><br>
<span class=me2>
2
<span class=me>pod-podmenu<br>
<span class=me2>
2.1
</span><br>
<span class=me2>
2.2
</span><br>
<span class=me2>
2.3
</span><br>
</span>
</span><br>
<span class=me2>
3
<span class=me>pod-podmenu<br>
<span class=me2>
3.1
</span><br>
<span class=me2>
3.2
</span><br>
<span class=me2>
3.3
</span><br>
</span>
</span><br>
</span>
</span>
<SCRIPT>
mov=function(){if(event.srcElement.childNodes[1])event.srcElement.childNodes[1].style.display='block';
}
mot=function(){if(event.srcElement.id!='mainMenu')event.srcElement.style.display='none';
}
</SCRIPT>
|
| |
| |
|
|
| |
|
|
| |
для: 12345
(14.02.2006 в 13:18)
| | | Спасибо, я уже этим занимаюсь! Кто знает как узнать какие элементы находятся внутри определенных тэгов? К примеру есть следующий код:
<div id=menu onMouseover="view()">
<div id=sub1 class=menu style="position: absolute; left: 70px; top: 30px">menu1</div>
<div id=sub1p style="position: absolute; left: 120px; top:30px">
<div class=sub>submenu1</div>
<div class=sub id=sub1_2>submenu1</div><div class=sub id=sub1_2p style="position: absolute; left: 60px; top: 24px">submenu2_1</div>
<div class=sub>submenu1</div>
</div>
|
Как мне с помощю JavaScript "узнать" какие элементы находятся в нутри тэга с id=menu(узнавать id), и дальше что бы сценарий работал с этими тэгами. Заранее спасибо! | |
| |
|
|
| |
|
|
| |
для: Георгий
(16.02.2006 в 19:34)
| | | Читайте DOM (http://zeiss.net.ru/docs/design/dom/index.htm), который можно использовать наряду с innerHTML . | |
| |
|
|
| |
|
|
| |
для: 12345
(16.02.2006 в 20:06)
| | | Как можно перечислить все элементы массива в Java Script? К примеру есть массив: childNodes[1] содержащий дочерние элементы, и мне надо всем этим элементам присвоить "style.display = "none".Зараее спасибо. | |
| |
|
|
| |
|
|
| |
для: Георгий
(18.02.2006 в 13:20)
| | | for (i in ...childNodes /*здесь пишем массив*/)
Или for(i=0;i<...childNodes.length;i++) | |
| |
|
|
