Javascript dropdown menu not disappearing

**captsig** · 09-10-2011 01:26 PM

[/B]Hi everyone,
I'm still trying to figure our why my drop down menu won't respond to the event handlers I have set up; I want the drop down menu to appear as if being pulled down; this works great. But once viewer mouses off the drop menu I want it to disappear and right now it won't. Here is the link to the page: http://www.captsigerson.com/SWD2/drop_menu3.html

Try either menu, it scrolls out fine; but you have to reload the page to get it to disappear. What baffles me is why my function mclose is not working.
Any suggestions would be appreciated:

Here is the code:
<script type="text/javascript" >
var active_menu=null;
var targetmenuid=null;
var clipht = 10;
var timerID;

function testchange(menuid)
{
if(active_menu == null)
{
change_menu(menuid);
}

}

function change_menu(menuid)
{
active_menu=document.getElementById(menuid);
active_menu.onmouseout = mclose;
switch(menuid)
{
case "menulist_1":
active_menu.style.position="absolute";
active_menu.style.top= "120px";
active_menu.style.left= "10px";
active_menu.style.clip="rect(0px 300px 10px 0px)";
active_menu.style.display ="block";
active_menu.onmouseout = mclose;
break;
case "menulist_2":
active_menu.style.position="absolute";
active_menu.style.top= "120px";
active_menu.style.left= "310px";
active_menu.style.clip="rect(0px 300px 10px 0px)";
active_menu.style.display ="block";

break;
}
timerID=setInterval("rolldown()", 1);
//window.alert("next statement after setInterval");
}

function mclose(menuid)
{
//window.alert("the element id is: "+ menuid);
var element=document.getElementById(menuid);
element.onmouseout=function ()
{
element.style.display = "none";
}

}

//loop thru to show menu being pulled down
function rolldown()
{
clipht=clipht + 3;
if(clipht <200)
{

// window.alert("inside clipht addition");
active_menu.style.clip="rect(0px, 300px," + clipht + "px, 0px)";

}
else {
clearInterval(timerID);
clipht = 0;
//window.alert("you have reached 300");
}
}//end rolldown

</script>

<style type="text/css" >
.menu {
float:left;
}
.menu .menulist {
display:none;
}
.menulist
{
background-color:#cebf91;
width: 290px;
height: 190px;
border: thin solid #000;

}
.menulist li {
list-style-type:none;
}
.menulist li a
{
background-color:#efe2b7;
width:220px;
height:40px;
border: thin solid #F93;
list-style:none;
padding-top:15px;
padding-left:10px;
display:block;
}
.menulist li a:hover
{
color: #000;
background-color:#cebf91;

}

</style>
</head>

<body>
<h2 align="center">Javascript test of drop down menus</h2>
<div id="main">
<div class="menu" id="menu1" onmouseover="testchange('menulist_1')" ><a href="#" ><img src="buttons/upcat_1.png" name="Image1" width="300" height="50" border="0" id="Image1" /></a>

<div class="menulist" id="menulist_1" >
<ul class="nav" >
<li><a href="#1">Topic Number One</a></li>
<li><a href="#2">Topic Number Two</a></li>
<li><a href="#3">Topic Number Three</a></li>
</ul>
</div>
</div>
<div class="menu" id="menu2" onmouseover="testchange('menulist_2')" ><a href="#" ><img src="buttons/upcat_2.png" name="Image2" width="300" height="50" border="0" id="Image2" /></a>

<div class="menulist" id="menulist_2" >
<ul class="nav">
<li><a href="#1">Topic Number Four</a></li>
<li><a href="#2">Topic Number Five</a></li>
<li><a href="#3 ">Topic Number Six</a></li>
</ul>
</div>
</div>

</div>
</body>
</html>

Thanks,
captsig

**JMRKER** · 09-10-2011 03:37 PM

You have some errors in the link.

In particular: active_menu2 is null
You should use the error console in FF to help you debug the problems.

**captsig** · 09-11-2011 05:35 PM

Hey, thanks for the reply; I've got it working at 95% of what I hoped to accomplish....still a little short of ideal.
I know many members will suggest Firebug as an aide for debugging but I have always found it intimidating to deal with. I know I should devote more time to understanding it.

captsig

**JMRKER** · 09-11-2011 06:49 PM

So what's the new code look like and what is the 5% incomplete part?

**captsig** · 09-11-2011 10:57 PM

Hi JMRKER,
well, here is the link that demos the 95%:
http://www.captsigerson.com/SWD2/drop_menu.html

I would have preferred not to have to require the viewer to 'click' in order for the drop menus to disappear; but I've been foolin' around with this thing for the last three mornings and I guess I just want to move on.

Any thing you can suggest would be very appreciated!!

captsig

Thread: Javascript dropdown menu not disappearing

Thread Tools

Display

Javascript dropdown menu not disappearing

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions