Вот хочу написать выпадющее меню без jquery, чтоб меню не сразу скрывалось, а через промежуток времени.
Хочу чтоб все выглядело так:
1)Функция
search_elem, искала элементы
LI, у которых присутствует узел
UL, и вызывала функцию
assign_event
2)Функция
assign_event - эта функция должна вешать обработчик события на элементы и останавливать всплытие(вызовом функции
stop_bubbling).
3)Функция
stop_bubbling, думаю здесь все понятно.
Вот начал писать код, и столкнулся с проблемой. Почему-то функция
assign_event, вешает события не только на нужный элемент, но и на всех его потомков, я никак немогу это прекратить, всплытие получается убирать, а это нет.
По идеи при наведение в моем коде на элемент имеющий потомка ul, должно появляться сообщение (alert). Но оно появляется на всех.
Вот код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Menu</title>
<script type="text/javascript">
[JS]var menu_id = "navbar";
var speed_show = 50;
var speed_hide = 1000;
function search_elem() {
var elem = document.getElementById(menu_id).getElementsByTagName("li");
for(i in elem) {
var list = elem[i].childNodes;
//alert(elem[i].nodeName);
for(a in list) {
if(list[a].nodeName == "UL") {
//alert(list[a].nodeName);
assign_event(elem[i], list[a]);
}
}
}
}
function assign_event(elem, list) {
elem.onmouseover = function() {
//alert(list.nodeName);
//list.style.display = "block";
alert("yes");
stop_bubbling();
}
//elem.onmouseout = start_hide;
}
function stop_bubbling(event) {
event = event || window.event;
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
}
onload = search_elem;
[/JS]
</script>
<style type="text/css">
#navbar, #navbar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navbar li {
float: left;
}
#navbar a {
background: #999999;
color: #FFFFFF;
display: block;
font: 11px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px;
cursor: pointer;
}
#navbar a:hover {
color: #E2144A;
background: #CCCCCC;
}
/*styles for sub-navbar*/
#navbar ul {
display: block;
position: absolute;
width: 150px;
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navbar ul li {
float: none;
}
#navbar ul a {
background: #666666;
padding: 3px;
}
#navbar ul ul {
margin-top: -19px;
margin-left: 150px;
}
</style>
</head>
<body>
<div>
<ul id="navbar">
<li><a hover="#">home</a></li>
<li><a hover="#">service</a>
<ul>
<li><a href="#">php</a></li>
<li><a href="#">java script</a>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">asp.net</a>
<ul>
<li><a hover="#">web-design</a></li>
<li><a hover="#">web-codding</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">jsp</a></li>
<li><a href="#">xhtml</a></li>
</ul></li>
<li><a hover="#">buy</a></li>
<li><a hover="#">about us</a></li>
<li><a hover="#">contacts</a></li>
</ul>
</div>