Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   выпадающее меню. (https://javascript.ru/forum/dom-window/2896-vypadayushhee-menyu.html)

gaolong 23.02.2009 20:38

выпадающее меню.
 
Есть вертикальное меню,которое появляется при нажатии на кнопку с любой вложеностю подкатегорий, и нужно его скрыть когда курсор выйдет из меню. через простенькую ф-цию я показываю меню....
файл 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;}
#pmenu ul {padding:0; margin:0; list-style-type: none; width:201px;}
#pmenu li {position:relative;}
#pmenu a, #pmenu a:visited {display:block;width:200px; font-size:10px; color:#000; height:23px; line-height:22px; text-decoration:none; text-indent:5px; background:#b2ab9b;; border:1px solid #fff; border-width:0 1px 1px 0;}
#pmenu li:hover > a {background:#dfd7ca; color:#c00;}
#pmenu li ul {display: none;}
#pmenu li:hover > ul {display:block; position:absolute; top:0; left:201px;}

пример страницы хтмл
<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>


может кто знает как решить проблему?

gaolong 24.02.2009 08:48

все ещё актуально....

Gvozd 24.02.2009 10:09

во первых у вас тут как минимум два элемента с id="tree_ul"
это недопустимо.
id должен быть ун икальным.
во вторых. в приведенном коде ни единой строчки JS.
display:none Должен срабатывать, если вы его правильно вызываете.
тут нету ни куды, ни как вы вешаете обработчик.
если проблема после выставления уник-id не решится, выкладывайте код JS

ЗЫ апать тему было необязательно.вы очень нетерпеливы.вот,если бы за сутки никто не обратил бы внимания, тогда я еще понимаю.

gaolong 24.02.2009 10:26

меню строится на пхп(сам код <ul><li>name </ul>), а цсс уже делает его выпадающим...тут яваскрипт ненужен для отображения,только показать-скрыть меню...что мне и нужно.
я могу конечно дописывать в построении списка каждому ul новое id, но ничего оно не даст...
Цитата:

тут нету ни куды, ни как вы вешаете обработчик.
это и есть вопрос впринципе....куда и как повесить скрипт закрытия меню...

Gvozd 24.02.2009 16:05

Цитата:

Сообщение от gaolong
я могу конечно дописывать в построении списка каждому ul новое id, но ничего оно не даст...

вы не можете.вы ДОЖНЫ так делать.

вешайте обработчик закрытия на onmouseover списков.
при этом, для того, чтобы при переходе на другой список, меню не закрывалось, можете сделать закрытие меню отложенным при помощи setTimeOut, и чтобы в случае перевода курсора на другой элемент(заведите для этого флаг) меню не закрывалось.в ином случае хай закрывается.
это есл я правильно понял логику, тчо вы хотите получить от меню

gaolong 24.02.2009 19:40

как узнать Ид елемента под курсором...

Gvozd 24.02.2009 23:41

напрямую никак(или я во всяком случае не знаю:D )

по моему это делается как-то так:
у вас должен быть какой-нибудь флаг(переменная), которая свидетельствует о том, что вы еще в меню.
назовем ее
onmenu=false;//со старта false

на событие элементов onmouseover ставим помимо выпадения меню(или оно у вас только по клику.тогда выпадение не ставим) ставим
onmenu=true;

на событие элементов onmouseout ставим конструкцию по типу
var temp_func=function(){
if(!onmenu)
   //тут закрываем меню
}
setTimeout(temp_func,500);

суть тут, в том, что через некоторое время уточняется состояние системы.

gaolong 24.02.2009 23:52

заработало через jQuery hover()

Gvozd 25.02.2009 00:13

и вы только ради этой плюшки решили подключить jQuery?


Часовой пояс GMT +3, время: 13:49.