jmsummerlin
Programmer
- Jun 7, 2006
- 1
I am messing around with drop down menus for my test web page.
Here is my aspx page:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="home.aspx.vb" Inherits="TestWebMenu.home"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test Menu</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content=" <link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<table>
<tr>
<td class="head" onmouseover="showLinks(1)" onmouseover="this.style.cursor='hand'; this.style.cursor='pointer';" onmouseout="hideLinks(1)">What's New?</td>
<td class="head">|</td>
<td class="head" onmouseover="showLinks(2)" onmouseout="hideLinks(2)">Animal Facts</td>
</tr>
<tr>
<td>
<table style="DISPLAY: none" class=submenu1 id="menuItem1">
<tr>
<td>Test Item 1</td>
</tr>
<tr>
<td>Test Item 2</td>
</tr>
</table>
</td>
<td></td>
<td>
<table style="DISPLAY: none" class=submenu1 id="menuItem2">
<tr>
<td>Test Item 3</td>
</tr>
<tr>
<td>Test Item 4</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
Here is my script:
<script language="javascript">
function showLinks(menuID) {
//alert(menuID);
var menu1 = document.getElementById('menuItem1');
var menu2 = document.getElementById('menuItem2');
if (menuID = 1) {
menu1.style.display = 'inline';
} else if (menuID = 2) {
menu2.style.display = 'inline';
}
}
function hideLinks(menuID) {
//alert(menuID);
var menu1 = document.getElementById('menuItem1');
var menu2 = document.getElementById('menuItem2');
if (menuID = 1) {
menu1.style.display = 'none';
} else if (menuID = 2) {
menu2.style.display = 'none';
}
}
</script>
I have got the first menu to display on mouseover, but the second will not show up.
Also, I would like to keep the cursor as an pointer.
Lastly, I would like to be able to keep the submenus displayed while the mouse is still over them.
Any help would be greatly appreciated.
Here is my aspx page:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="home.aspx.vb" Inherits="TestWebMenu.home"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test Menu</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content=" <link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<table>
<tr>
<td class="head" onmouseover="showLinks(1)" onmouseover="this.style.cursor='hand'; this.style.cursor='pointer';" onmouseout="hideLinks(1)">What's New?</td>
<td class="head">|</td>
<td class="head" onmouseover="showLinks(2)" onmouseout="hideLinks(2)">Animal Facts</td>
</tr>
<tr>
<td>
<table style="DISPLAY: none" class=submenu1 id="menuItem1">
<tr>
<td>Test Item 1</td>
</tr>
<tr>
<td>Test Item 2</td>
</tr>
</table>
</td>
<td></td>
<td>
<table style="DISPLAY: none" class=submenu1 id="menuItem2">
<tr>
<td>Test Item 3</td>
</tr>
<tr>
<td>Test Item 4</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
Here is my script:
<script language="javascript">
function showLinks(menuID) {
//alert(menuID);
var menu1 = document.getElementById('menuItem1');
var menu2 = document.getElementById('menuItem2');
if (menuID = 1) {
menu1.style.display = 'inline';
} else if (menuID = 2) {
menu2.style.display = 'inline';
}
}
function hideLinks(menuID) {
//alert(menuID);
var menu1 = document.getElementById('menuItem1');
var menu2 = document.getElementById('menuItem2');
if (menuID = 1) {
menu1.style.display = 'none';
} else if (menuID = 2) {
menu2.style.display = 'none';
}
}
</script>
I have got the first menu to display on mouseover, but the second will not show up.
Also, I would like to keep the cursor as an pointer.
Lastly, I would like to be able to keep the submenus displayed while the mouse is still over them.
Any help would be greatly appreciated.
