Форум

gaolong · #1 (**permalink**) 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 · #2 (**permalink**) 24.02.2009, 08:48

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

Gvozd · #3 (**permalink**) 24.02.2009, 10:09

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

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

gaolong · #4 (**permalink**) 24.02.2009, 10:26

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

Цитата:

тут нету ни куды, ни как вы вешаете обработчик.

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

Gvozd · #5 (**permalink**) 24.02.2009, 16:05

Сообщение от gaolong

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

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

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

gaolong · #6 (**permalink**) 24.02.2009, 19:40

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

Gvozd · #7 (**permalink**) 24.02.2009, 23:41

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

)

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

onmenu=false;//со старта false

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

onmenu=true;

на событие элементов onmouseout ставим конструкцию по типу

var temp_func=function(){
if(!onmenu)
   //тут закрываем меню
}
setTimeout(temp_func,500);

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

gaolong · #8 (**permalink**) 24.02.2009, 23:52

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

Gvozd · #9 (**permalink**) 25.02.2009, 00:13

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

Форум

Справочник

Discord чат

Курсы javascript