выпадающее меню.
Есть вертикальное меню,которое появляется при нажатии на кнопку с любой вложеностю подкатегорий, и нужно его скрыть когда курсор выйдет из меню. через простенькую ф-цию я показываю меню....
файл script.js
function show(id) {
document.getElementById(id).style.display='';
}
а вот скрыть выставляя display:none не получается, оно или вообще не закрывается или после выхода курсора с 1 пункта меню на другой закрывается (в зависимости куда вставить вызов ф-ции). вот код.... цсс menu_style.css Код:
#pmenu {padding:0; margin:25px 0 50px 15px; list-style-type: none; width:101px;}
<html>
<head>
<title></title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" media="all" type="text/css" href="menu_style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body bgcolor="#737994" text="#FFFFFF" link="#FFFFFF" topmargin="0" leftmargin="0">
<div class="conteiner1" style="border:1px solid #000000;">
<div class="button1">
<img onclick="show('menu')" src="button.gif"/>
</div>
<div id="menu" style="display: none;">
<!--
формат записи
<ul class='tree_ul'>
<li class='tree_li'><a href='' class='tree_a'></a>
</ul>
-->
<ul id='pmenu' name='pmenu'>
<li class="tree_li"><a href="" class="tree_a">1</a>
<ul class="tree_ul" id="tree_ul">
<li class="tree_li"><a href="" class="tree_a">11</a>
<li class="tree_li"><a href="" class="tree_a">12</a>
<li class="tree_li"><a href="" class="tree_a">13</a>
<li class="tree_li"><a href="" class="tree_a">14</a>
<li class="tree_li"><a href="" class="tree_a">15</a>
<li class="tree_li"><a href="" class="tree_a">16</a>
<li class="tree_li"><a href="" class="tree_a">17</a>
<ul class="tree_ul" id="tree_ul">
<li class="tree_li"><a href="" class="tree_a">171</a>
<li class="tree_li"><a href="" class="tree_a">172</a>
<li class="tree_li"><a href="" class="tree_a">173</a>
</ul>
<li class="tree_li"><a href="" class="tree_a">18</a>
<li class="tree_li"><a href="" class="tree_a">19</a>
</ul>
</ul>
</div></div>
</body>
</html>
может кто знает как решить проблему? |
все ещё актуально....
|
во первых у вас тут как минимум два элемента с id="tree_ul"
это недопустимо. id должен быть ун икальным. во вторых. в приведенном коде ни единой строчки JS. display:none Должен срабатывать, если вы его правильно вызываете. тут нету ни куды, ни как вы вешаете обработчик. если проблема после выставления уник-id не решится, выкладывайте код JS ЗЫ апать тему было необязательно.вы очень нетерпеливы.вот,если бы за сутки никто не обратил бы внимания, тогда я еще понимаю. |
меню строится на пхп(сам код <ul><li>name </ul>), а цсс уже делает его выпадающим...тут яваскрипт ненужен для отображения,только показать-скрыть меню...что мне и нужно.
я могу конечно дописывать в построении списка каждому ul новое id, но ничего оно не даст... Цитата:
|
Цитата:
вешайте обработчик закрытия на onmouseover списков. при этом, для того, чтобы при переходе на другой список, меню не закрывалось, можете сделать закрытие меню отложенным при помощи setTimeOut, и чтобы в случае перевода курсора на другой элемент(заведите для этого флаг) меню не закрывалось.в ином случае хай закрывается. это есл я правильно понял логику, тчо вы хотите получить от меню |
как узнать Ид елемента под курсором...
|
напрямую никак(или я во всяком случае не знаю:D )
по моему это делается как-то так: у вас должен быть какой-нибудь флаг(переменная), которая свидетельствует о том, что вы еще в меню. назовем ее onmenu=false;//со старта false на событие элементов onmouseover ставим помимо выпадения меню(или оно у вас только по клику.тогда выпадение не ставим) ставим onmenu=true; на событие элементов onmouseout ставим конструкцию по типу
var temp_func=function(){
if(!onmenu)
//тут закрываем меню
}
setTimeout(temp_func,500);
суть тут, в том, что через некоторое время уточняется состояние системы. |
заработало через jQuery hover()
|
и вы только ради этой плюшки решили подключить jQuery?
|
| Часовой пояс GMT +3, время: 04:50. |