[SOLVED] Dropdown Menu

Northern Flame · January 27, 2008

I am not an expert at javascript, actually,

im no where near being an expert. But I

am trying to create a simple dropdown menu

and have run into a few problems. I have tried

a few different things, and nothing seems to

work, can anyone help me?

heres the code i recently tried:

<html>
<head>
	<title>
		Test Website
	</title>
	<style type="text/css">
		div#menu{
			background-color:#CC0000;
			color:#FFFFFF;
		}
	</style>
	<script type="text/javascript">
		function showMenu(showhide){
			var menu = "Menu";
			var l_1 = '<a href="/">Home</a><br />';
			var l_2 = '<a href="/about.php">About Us</a><br />';
			var l_3 = '<a href="/contact.php">Contact Us</a><br />';
			var l_4 = '<a href="/links.php">Links</a>';
			var br = "<br>";

			if(showhide == 'show'){
				document.getElementById("menu").innerHTML=menu + br + l_1 + l_2 + l_3 + l_4 + br;
			} else if(showhide == 'hide'){
				document.getElementById("menu").innerHTML=menu + br;
			}
		}
	</script>
</head>
<body>
	<table>
		<tr>
			<td>
				This is a Test
			</td>
			<td>
				This is another test
			</td>
		</tr>
		<tr>
			<td>
				Blah Blah Blah
			</td>
			<td>
				<div id="menu" onMouseOut="showMenu('hide')" onMouseOver="showMenu('show');">
					Menu<br>
				</div>
			</td>
		</tr>
	</table>
</body>
</html>

this almost works.

When I put my mouse over the word "Menu"

the div expands as it should. When I put

my mouse anywhere in the div where there

is not a link the menu continues to show. But

when I put my mouse over a link the menu

hides again and i never have enough time

to click the link. Can anyone help me with this?

phpQuestioner · January 27, 2008

try this:

<html>
<head>
	<title>
		Test Website
	</title>
	<style type="text/css">
		div#menu{
			background-color:#CC0000;
			color:#FFFFFF;
		}
	</style>
	<script type="text/javascript">
		function showMenu(showhide){
			var menu = "Menu";
			var l_1 = '<a href="/" onMouseOver="showMenu(\'show\')">Home</a><br />';
			var l_2 = '<a href="/about.php" onMouseOver="showMenu(\'show\')">About Us</a><br />';
			var l_3 = '<a href="/contact.php" onMouseOver="showMenu(\'show\')">Contact Us</a><br />';
			var l_4 = '<a href="/links.php" onMouseOver="showMenu(\'show\')">Links</a>';
			var br = "<br>";

			if(showhide == 'show'){
				document.getElementById("menu").innerHTML=menu + br + l_1 + l_2 + l_3 + l_4 + br;
			} else if(showhide == 'hide'){
				document.getElementById("menu").innerHTML=menu + br;
			}
		}
	</script>
</head>
<body>
	<table>
		<tr>
			<td>
				This is a Test
			</td>
			<td>
				This is another test
			</td>
		</tr>
		<tr>
			<td>
				Blah Blah Blah
			</td>
			<td>
				<div id="menu" onMouseOut="showMenu('hide')" onMouseOver="showMenu('show');">
					Menu<br>
				</div>
			</td>
		</tr>
	</table>
</body>
</html>

Northern Flame · January 27, 2008

thanks that worked!

Sign In

[SOLVED] Dropdown Menu

Recommended Posts

Northern Flame

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

Northern Flame

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information