| |
|
|
| | Начал осваивать премудрости JS. На первом же скрипте возникли вопросы.
Написал выпадающее меню:
<html>
<body>
<style>
a.menu {border: 1px solid black; width: 100px; text-align: center; margin: 1px;}
a.menu:hover { border: 1px solid black; background: #550000;}
.sub{visibility: hidden; display: inline; float: left; text-align: center;border:1px solid}
a.submenu {width: 100px; display: block; border: 1px solid black; margin: 0px;}
a.submenu:hover {background: #550000;}
</style>
<script>
<!--
var old_menu;
function hide_old(old_menu) // прячем предыдущую ветвь
{
document.all[old_menu].style.visibility="hidden";
}
function show_layer(menu_id) //отображаем выбранную ветвь
{
document.all[menu_id].style.visibility="visible";
old_menu=menu_id;
}
function do_menu(menu_id) //отображаем меню
{
if (!old_menu)
{
show_layer(menu_id);
}
else
{
hide_old(old_menu);
show_layer(menu_id);
}
}
// -->
</script>
<a href="#" class="menu" onmouseover="do_menu('m1')">пункт 1</a><a href="#" class="menu" onmouseover="do_menu('m2')">пункт 2</a><a href="#" class="menu" onmouseover="do_menu('m3')">пункт 3</a>
<div id="m1" class="sub" onmouseout="hide_old('m1')">
<a href="#" class="submenu" onmouseover="show_layer('m1')">пункт 1-1</a>
<a href="#" class="submenu" onmouseover="show_layer('m1')">пункт 1-2</a>
<a href="#" class="submenu" onmouseover="show_layer('m1')">пункт 1-3</a>
</div>
<div id="m2" class="sub" onmouseout="hide_old('m2')">
<a href="#" class="submenu" onmouseover="show_layer('m2')">пункт 2-1</a>
<a href="#" class="submenu" onmouseover="show_layer('m2')">пункт 2-2</a>
<a href="#" class="submenu" onmouseover="show_layer('m2')">пункт 2-3</a>
</div>
<div id="m3" class="sub" onmouseout="hide_old('m3')">
<a href="#" class="submenu" onmouseover="show_layer('m3')">пункт 3-1</a>
<a href="#" class="submenu" onmouseover="show_layer('m3')">пункт 3-2</a>
<a href="#" class="submenu" onmouseover="show_layer('m3')">пункт 3-3</a>
</div>
</body>
</html>
|
Не нравится реализация закрывания ветви меню при убирании с нее мышки. Во-первых, постоянно идет вызов функции show_layer, а во-вторых все это работает только при условии margin: 0 - если поставить больше - начинает глючить.
Быть может подскажете, как это лучше сделать? | |
| |
|
|
| |
|
|
| |
для: Loki
(08.01.2006 в 16:03)
| | | >> постоянно идет вызов функции show_layer
Ну значит нужно переписат код : )
Что мешает переместить onmouseover="show_layer('m3')" со ссылки на слой?
>> а во-вторых все это работает только при условии margin: 0
и браузера IE.
P.S. Прикрепляйте код в ввиде файла - удобнее смотреть ; ) | |
| |
|
|
| |
|
|
| |
для: Artem S.
(08.01.2006 в 16:54)
| | | >Что мешает переместить onmouseover="show_layer('m3')" со ссылки на слой?
Так изначально и было сделано, но при этом ветвь закрывается при попытке перевести курсор с верхнего пункта на ветвь.
PS еще раз попробовал - и все заработало. Мистика.
Спасибо:) | |
| |
|
|
| |
|
|
| |
для: Loki
(08.01.2006 в 19:23)
| | | Причесал - выкладываю, может кому понадобится. | |
| |
|
|
| |
|
|
| |
для: Loki
(08.01.2006 в 20:53)
| | | И все-таки под эксплорером подглючивает:(
Может кто посоветует как расставить события? | |
| |
|
|
| |
|
|
| |
для: Loki
(09.01.2006 в 20:21)
| | | мда...дальше первой ячейки не добраться :( | |
| |
|
|
| |
|
|
| |
для: Loki
(09.01.2006 в 20:21)
| | | Надо задержку на hide_old() поставить, которую не забывать отменять перед появлением меню по do_menu()
onmouseout=ww=setTimeout("hide_old('m1')",99);
...
ww=0;
function do_menu(menu_id) //отображаем меню
clearTimeout(ww);
{
if (!old_menu)
{
show_layer(menu_id);
}
else
{
hide_old(old_menu);
show_layer(menu_id);
}
}
|
Ещё лучше сделать переменные таймаута индивидуальными для каждого меню. | |
| |
|
|
| |
|
|
| |
для: 12345
(10.01.2006 в 13:03)
| | | Спасибо! Немного разобрался и сделал. К сожалению, если до истечения таймаута пользователь в задумчивости окажется между ячейками, то меню исчезнет прямо под ним:)
Короче, margin таким штукам противопоказан, либо надо вызывать функцию отображения меню постоянно.
В любом случае, опыт приобрел - спасибо! | |
| |
|
|
