PDA

View Full Version : Help with simple javascript drop down menu



DanPaul01
08-21-2008, 09:50 PM
Ok, first off I am clueless when it comes to javascript so be gentle. I got this from a tutorial and I am having a hard time getting the 2 columns to drop down for a menu.

I went to the site below

http://javascript-array.com/scripts/simple_drop_down_menu/

and copied and paste the menu and it works great. However some of our drop down menus are really long so i am trying to create a second column so I modified it like so.

html view


<ul id="sddm">
<li style="border-right:1px black solid; margin-left:1px;"><a href="#"
onmouseover="mopen('m1');mopen('m2')"
onmouseout="mclosetime()">Products</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">All Products</a>
<a href="#">more links</a>
<a href="#">more links</a>
</div>

<div id="m2" style="margin-left:100px;"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">All Products</a>
<a href="#">More links</a>
<a href="#">more links</a>
</div>
</li>
</ul>


and here is my javascript

javascript


<script type="text/javascript">

// Copyright 2006-2007 javascript-array.com

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

</script>


the only thing I took out from the original javascript file is



// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';


because if its there it doesnt display the second menu, however now it will display the second menu but they wont close....

any help would be greatly appreciated.