Hi all, I'm new to web development and am experimenting with different things; one of which would be creating a visually appealing "drop-down" menu. I had a simple CSS selector setup before but I opted for a JavaScript solution instead, making the change for the greater flexibility which the approach provided me. I almost have the entire thing down, save for an annoying nuance that seems to crop up for no apparent reason. My plan is to set the height for all <div> elements to 0 except the one being accessed. Then the height for the active <div> element is set to 200px with or without a delay depending on which element (menu item or part of the page) the mouse was on before. I keep track of that by employing a variable ('k') which changes accordingly. Also, I have styled those <div> elements with 0 height initially and applied a transition of .7s for the height in my stylesheet. The problem occurs when I hover on another menu item after having hovered on one before. Instead of setting the height for the <div> element accessed by the previous menu item to 0, it displays the <div> elements accessed by both elements. In fact, I'll just let my code do the talking (do let me know if you'd need more):
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
var k=0;
function hoverDelay(x)
{
if (k==0)
{
document.getElementById(x).style.height='200px';
k=1;
}
else
{
setTimeout(function() {
if(k==1)
{
document.getElementById(x).style.height='200px';
}
}, 700);
}
}
</script>
</head>
<body>
<header>
<!--Some unrelated markup here-->
<div style="position:absolute;top:100%;width:100%;height:175%;outline:solid green 0px;"
onMouseOver=
"
k=0;
document.getElementById('dropdown1').style.height='0px';
document.getElementById('dropdown2').style.height='0px';
document.getElementById('dropdown3').style.height='0px';
document.getElementById('dropdown4').style.height='0px';
document.getElementById('dropdown5').style.height='0px';
"
></div>
</header>
<ul class="nav">
<li onMouseOver=
"
document.getElementById('dropdown2').style.height='0px';
document.getElementById('dropdown3').style.height='0px';
document.getElementById('dropdown4').style.height='0px';
document.getElementById('dropdown5').style.height='0px';
hoverDelay('dropdown1');"
><div class="menu"><a href="#">Item 1</a></div></li>
<li><div class="menu"
onMouseOver="
document.getElementById('dropdown1').style.height='0px';
document.getElementById('dropdown3').style.height='0px';
document.getElementById('dropdown4').style.height='0px';
document.getElementById('dropdown5').style.height='0px';
hoverDelay('dropdown2');
"
><a href="#">Item 2</a></li>
<li><div class="menu"
onMouseOver=
"
document.getElementById('dropdown1').style.height='0px';
document.getElementById('dropdown2').style.height='0px';
document.getElementById('dropdown4').style.height='0px';
document.getElementById('dropdown5').style.height='0px';
hoverDelay('dropdown3');
"
><a href="#">Item 3</a></li>
<li><div class="menu"
onMouseOver=
"
document.getElementById('dropdown1').style.height='0px';
document.getElementById('dropdown2').style.height='0px';
document.getElementById('dropdown3').style.height='0px';
document.getElementById('dropdown5').style.height='0px';
hoverDelay('dropdown4');
"
><a href="#">Item 4</a></li>
<li><div class="menu"
onMouseOver=
"
document.getElementById('dropdown1').style.height='0px';
document.getElementById('dropdown2').style.height='0px';
document.getElementById('dropdown3').style.height='0px';
document.getElementById('dropdown4').style.height='0px';
hoverDelay('dropdown5');
"
><a href="#">Item 5</a></li>
</ul>
<div id="hoverTog" style="position:absolute;top:12%;left:0;width:100%;height:6%;outline:solid orange 0px;z-index:2;"
onMouseOver=
"
k=0;
document.getElementById('dropdown1').style.height='0px';
document.getElementById('dropdown2').style.height='0px';
document.getElementById('dropdown3').style.height='0px';
document.getElementById('dropdown4').style.height='0px';
document.getElementById('dropdown5').style.height='0px';
"
></div>
<!--Below are the <div> elements being accessed by the menu items above-->
<div id="dropdown1" class="dropdown" name="dropdown">
Stuff
</div>
<div id="dropdown2" class="dropdown" name="dropdown">
Stuff
</div>
<div id="dropdown3" class="dropdown" name="dropdown">
Stuff
</div>
<div id="dropdown4" class="dropdown" name="dropdown">
Stuff
</div>
<div id="dropdown5" class="dropdown" name="dropdown">
Stuff
</div>
<!--More unrelated markup-->
</body>
</html>Any help or guidance on this would be greatly appreciated. On a side note, I haven't really started properly learning JavaScript yet; I'm just putting together bits and pieces at the moment so if my code seems amateurish I ask your forgiveness. I plan on refining the code further, but for the moment I think it may pass as acceptable. Thanks!