Menu
I’m trying to make a dropdown menu in JS, and I have some difficulties with it.
This is my code:
[CODE]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Untitled Document</title>
<style>
@import “stil.css”;
</style>
<script type=”text/javascript” src=”test.js”></script>
</head>
<ul id=”sddm”>
<li><a href=”#” id=”home” onmouseover=”pokazi(‘m1’)” onmouseout=”tzatvori()”
>Home</a>
<div id=”m1″ >
<a href=”#” onmouseover=”pokazi2(‘m3’)” onmouseout=”tzatvori()”>HTML Drop Down</a>
<div id=”m3″>
<a href=”#” onmouseover=”pokazi(‘m3’)” onmouseout=”tzatvori()”>DHTML Menu</a>
<a href=”#” onmouseover=”pokazi(‘m3’)” onmouseout=”tzatvori()”>DHTML Menu</a>
<a href=”#” onmouseover=”pokazi(‘m3’)” onmouseout=”tzatvori()”>DHTML Menu</a>
<a href=”#” onmouseover=”pokazi(‘m3’)” onmouseout=”tzatvori()”>DHTML Menu</a>
</div>
<a href=”#” onmouseover=”pokazi(‘m1’)” onmouseout=”tzatvori()”>DHTML Menu</a>
<a href=”#” onmouseover=”pokazi(‘m1’)” onmouseout=”tzatvori()”>JavaScript DropDown</a>
<a href=”#” onmouseover=”pokazi(‘m1’)” onmouseout=”tzatvori()”>Cascading Menu</a>
<a href=”#” onmouseover=”pokazi(‘m1’)” onmouseout=”tzatvori()”>CSS Horizontal Menu</a>
</div>
</li>
<li><a href=”#” id=”home” onmouseover=”pokazi(‘m2’)” onmouseout=”tzatvori()”
>Gira</a>
<div id=”m2″ >
<a href=”#” onmouseover=”pokazi(‘m2’)” onmouseout=”tzatvori()”>HTML Drop Down</a>
<a href=”#” onmouseover=”pokazi(‘m2’)” onmouseout=”tzatvori()”>DHTML Menu</a>
<a href=”#” onmouseover=”pokazi(‘m2’)” onmouseout=”tzatvori()”>JavaScript DropDown</a>
<a href=”#” onmouseover=”pokazi(‘m2’)” onmouseout=”tzatvori()”>Cascading Menu</a>
<a href=”#” onmouseover=”pokazi(‘m2’)” onmouseout=”tzatvori()”>CSS Horizontal Menu</a>
</div>
</li>
</ul>
<div style=”clear:both”></div>
</html>
[CODE]
*{
float:none;
margin:0;
padding:0;
}
#sddm li
{ float:left;
list-style:none;
}
#m1 {
visibility:hidden;
position:absolute;
}
#home{
display:inline;
}
#m2 {
visibility:hidden;
position:absolute;
}
#stuff a{
float:left;
display:block;
}
#sddm div a{
display:block;
}
#m3{
position:absolute;
visibility:hidden;
left:140px;
top:-5px;
}
[CODE]
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function pokazi(id){
cleartimer();
if(ddmenuitem) ddmenuitem.style.visibility = ‘hidden’;
/*OVO MORA OVDE INACE NECE DA ZATVORI */
ddmenuitem=document.getElementById(id);
ddmenuitem.style.visibility=’visible’;
}
function pokazi2(id){
cleartimer();
ddmenuitem=document.getElementById(id);
ddmenuitem.style.visibility=’visible’;
}
function zatvori(){
ddmenuitem.style.visibility=”hidden”;
}
function tzatvori(){
closetimer=setTimeout(“zatvori()”,timeout);
}
function cleartimer(){
clearTimeout(closetimer);
closetimer=null;
}
I’m still new with JavaScript so I’m having some problems here.
If you put your mouse over Home the dropdown menu will appear, and if you put your mouse over the first link in the dropdown (HTML Drop Down), you’ll see that the sidemenu appears.
Now comes the bad part.
When the sidemenu appears and you move your mouse to the second top link (Gira), you’ll see that sidemenu disappears but the previous menu stays and the new dropdown from Gira overlaps with the dropdown menu from Home.
Can someone help me with this one a bit?
I edited script from [URL=”http://javascript-array.com/scripts/simple_drop_down_menu”]http://javascript-array.com/scripts/simple_drop_down_menu
If you have any easier way to make dropdown menus with JS feel free to give me a link.