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!

Seeing as how you are new to javascript I would suggest learning jQuery asap. Read through the documentation and tutorials.
jQuery is specifically designed for the effects and manipulations you are trying to implement in your page. Good luck.

Seeing as how you are new to javascript I would suggest learning jQuery asap. Read through the documentation and tutorials.
jQuery is specifically designed for the effects and manipulations you are trying to implement in your page. Good luck.

Thank you MHENRU. I found the jQuery library to be quite useful. However, I still need help with the buggy JavaScript I presented.I'm just trying to understand why the all the corresponding <div> elements don't get their height reset to 0px when I hover over a menu item. Although, I have noticed that while they may not re-size correctly when I hover over the menu item (also a <div> element), they do when I hover over the child anchor tag right after having hovered over the menu item (or vice-versa).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.