I was using this free script for a sliding drop-down menu to make a vertical slide menu so that I could get the same sliding and fading animations that it provided. However, when I tried to reformat it by removing all the float and positioning css, it doesn't work as I imagined. The menu doesn't close all the way and continues to display about 4-5px of sub-menu in between each of the menu items. Despite any changes I have made to the css, or any structural changes in the html, it still behaves the same way regardless, leading me to believe that the javascript is the issue. Nonetheless, I can't really see why the script would cause this problem after inspecting it. If someone could explain why this occurs, I would be grateful.
HTML:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/2002/08/xhtml/xhtml1-strict.xsd" xml:lang="en" lang="en">
<head>
<title>Test Page - Enhanced Drop Down Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="ddm.js"></script>
<link rel="StyleSheet" href="Test.css" type="text/css" />
</head>
<body>
<ul class="hddm">
<li>
<a href="#" id="one-ddheader" onmouseover="openMenu('one',1)" onmouseout="openMenu('one',-1)">Head 1</a>
<div id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="openMenu('one',-1)">
<a href="#">Choice 1</a>
<a href="#">Choice 2</a>
<a href="#">Choice 3</a>
<a href="#">Choice 4</a>
<a href="#">Choice 5</a>
</div>
</li>
<li>
<a href="#" id="two-ddheader" onmouseover="openMenu('two',1)" onmouseout="openMenu('two',-1)">Head 2</a>
<div id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="openMenu('two',-1)">
<a href="#">Choice 1</a>
<a href="#">Choice 2</a>
</div>
</li>
<li>
<a href="#" id="three-ddheader" onmouseover="openMenu('three',1)" onmouseout="openMenu('three',-1)">Head 3</a>
<div id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="openMenu('three',-1)">
<a href="#">Choice 1</a>
<a href="#">Choice 2</a>
<a href="#">Choice 3</a>
</div>
</li>
<li>
<a href="#" id="four-ddheader" onmouseover="openMenu('four',1)" onmouseout="openMenu('four',-1)">Head 4</a>
<div id="four-ddcontent" onmouseover="cancelHide('four')" onmouseout="openMenu('four',-1)">
<a href="#">Choice 1</a>
<a href="#">Choice 2</a>
<a href="#">Choice 3</a>
<a href="#">Choice 4</a>
</div>
</li>
<li>
<a href="#" id="five-ddheader" onmouseover="openMenu('five',1)" onmouseout="openMenu('five',-1)">Head 5</a>
<div id="five-ddcontent" onmouseover="cancelHide('five')" onmouseout="openMenu('five',-1)">
<a href="#">Choice 1</a>
<a href="#">Choice 2</a>
<a href="#">Choice 3</a>
<a href="#">Choice 4</a>
<a href="#">Choice 5</a>
</div>
</li>
</ul>
<div style="clear:both"></div>
</body>
</html>
Code:
body
{
margin: 0%;
padding: 0%;
font: 80% verdana, arial, sans-serif;
background-color:#009966;
}
#backdrop
{
background: #E0FFFF;
width: 70%;
height: 100%;
position: absolute;
left: 15%;
z-index: -20;
}
ul.hddm
{
float: left;
margin: auto;
width: 15%;
}
ul.hddm li
{
list-style: none;
font: bold 14px arial;
}
ul.hddm li a
{
display: block;
margin: 0em;
padding: .5em 0em;
background-color: #37836F;
color: #FFFFFF;
text-align: center;
text-decoration: none;
}
ul.hddm li div
{
overflow:hidden;
display: none;
background: #EAEBD8;
}
ul.hddm li div a
{
position: relative;
display: block;
margin: 0%;
padding: .3em 0em .3em .5em;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #84D289;
color: #FFFFFF;
font: bold 12px arial;
}
ul.hddm li div a:hover
{
background: #55AA55;
color: #FFFFFF;
}
Code:
var ddSpeed = 10;
var ddTimer = 15;
// main function to handle the mouse events //
function openMenu(id, direction)
{
var header = document.getElementById(id + '-ddheader');
var content = document.getElementById(id + '-ddcontent');
clearInterval(content.timer);
if(direction == 1)
{
clearTimeout(header.timer);
if(content.maxh && content.maxh <= content.offsetHeight)
{
return;
}
else if(!content.maxh)
{
content.style.display = 'block';
content.style.height = 'auto';
content.maxh = content.offsetHeight;
content.style.height = '0px';
}
content.timer = setInterval(function(){ddSlide(content,1)},ddTimer);
}
else
{
header.timer = setTimeout(function(){closeMenu(content)},400);
}
}
// collapse the menu //
function closeMenu(content)
{
content.timer = setInterval(function(){ddSlide(content,-1)},ddTimer);
}
// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id)
{
var header = document.getElementById(id + '-ddheader');
var content = document.getElementById(id + '-ddcontent');
clearTimeout(header.timer);
clearInterval(content.timer);
if(content.offsetHeight < content.maxh)
{
content.timer = setInterval(function(){ddSlide(content,1)},ddTimer);
}
}
function ddSlide(content, direction)
{
var currentHeight = content.offsetHeight;
var distance;
if(direction == 1)
{
distance = (Math.round((content.maxh - currentHeight) / ddSpeed));
}
else
{
distance = (Math.round(currentHeight / ddSpeed));
}
if(distance <= 1 && direction == 1)
{
distance = 1;
}
content.style.height = currentHeight + (distance * direction) + 'px';
content.style.opacity = currentHeight / content.maxh;
content.style.filter = 'alpha(opacity=' + (currentHeight * 100 / content.maxh) + ')';
if((currentHeight < 2 && direction != 1) || (currentHeight > (content.maxh - 2) && direction == 1))
{
clearInterval(content.timer);
}
}
Sorry for the amount of javascript, but I can't really pinpoint where the problem is. I can say it isn't in the cancelHide function, but that is about it...
Also, note: I recognize that the menu probably needs to be set only to open each submenu on click, however it doesn't change the spacing problem.
