In this article, we will discuss about that how we
create a simple menu in javascript, for this follow these steps:
Step1: First we create two tables like
this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled
Page</title>
</head>
<body>
<table border="1" width="100%">
<tr align="center" style="background-color:
Gray;">
<td id="tdmain1" onmouseover="Show1()" onmouseout="Hide1()">
Home
</td>
<td id="tdmain2" onmouseover="Show2()" onmouseout="Hide2()">
City
</td>
<td id="tdmain3" onmouseover="Show3()" onmouseout="Hide3()">
Sports
</td>
<td id="tdmain4" onmouseover="Show4()" onmouseout="Hide4()">
World
</td>
<td id="tdmain5" onmouseover="Show5()" onmouseout="Hide5()">
Buisness
</td>
<td id="tdmain6" onmouseover="Show6()" onmouseout="Hide6()">
Tech
</td>
</tr>
</table>
<table border="1" width="100%">
<tr id="tr1" align="center" style="display:
none;">
<td>
Opinion
</td>
<td>
Blogs
</td>
<td>
Auto
</td>
<td>
Polls
</td>
<td>
Speak Out
</td>
</tr>
<tr id="tr2" align="center" style="display:
none;">
<td>
Mumbai
</td>
<td>
Delhi
</td>
<td>
Banglore
</td>
<td>
Hyderabad
</td>
<td>
Chennai
</td>
</tr>
<tr id="tr3" align="center" style="display:
none;">
<td>
Cricket
</td>
<td>
Tennis
</td>
<td>
Badminton
</td>
<td>
Hockey
</td>
<td>
Base Ball
</td>
</tr>
<tr id="tr4" align="center" style="display:
none;">
<td>
India </td>
<td>
Australia
</td>
<td>
America
</td>
<td>
China
</td>
<td>
Bangladesh
</td>
</tr>
<tr id="tr5" align="center" style="display:
none;">
<td>
Indian Buisness
</td>
<td>
International Buisness
</td>
<td>
Polls
</td>
<td>
Ups and Downs
</td>
<td>
Speak Out
</td>
</tr>
<tr id="tr6" align="center" style="display:
none;">
<td>
News
</td>
<td>
Personal Tech
</td>
<td>
Careers
</td>
<td>
Social Media
</td>
</tr>
</table>
</body>
</html>
Step 2: Now we write the javascript function for the onmouseover event:
<script language="javascript">
function Show1()
{
document.getElementById("tdmain1").style.backgroundColor
= "#780000";
document.getElementById("tdmain1").style.color
= "White";
document.getElementById("tr1").style.display
= 'block';
document.getElementById("tr2").style.display
= 'none';
document.getElementById("tr3").style.display
= 'none';
document.getElementById("tr4").style.display
= 'none';
document.getElementById("tr5").style.display
= 'none';
document.getElementById("tr6").style.display
= 'none';
}
function Show2()
{
document.getElementById("tdmain2").style.backgroundColor
= "#780000";
document.getElementById("tdmain2").style.color
= "White";
document.getElementById("tr2").style.display
= 'block';
document.getElementById("tr1").style.display
= 'none';
document.getElementById("tr3").style.display
= 'none';
document.getElementById("tr4").style.display
= 'none';
document.getElementById("tr5").style.display
= 'none';
document.getElementById("tr6").style.display
= 'none';
}
function Show3()
{
document.getElementById("tdmain3").style.backgroundColor
= "#780000";
document.getElementById("tdmain3").style.color
= "White";
document.getElementById("tr3").style.display
= 'block';
document.getElementById("tr2").style.display
= 'none';
document.getElementById("tr1").style.display
= 'none';
document.getElementById("tr4").style.display
= 'none';
document.getElementById("tr5").style.display
= 'none';
document.getElementById("tr6").style.display
= 'none';
}
function Show4()
{
document.getElementById("tdmain4").style.backgroundColor
= "#780000";
document.getElementById("tdmain4").style.color
= "White";
document.getElementById("tr4").style.display
= 'block';
document.getElementById("tr2").style.display
= 'none';
document.getElementById("tr3").style.display
= 'none';
document.getElementById("tr1").style.display
= 'none';
document.getElementById("tr5").style.display
= 'none';
document.getElementById("tr6").style.display
= 'none';
}
function Show5()
{
document.getElementById("tdmain5").style.backgroundColor
= "#780000";
document.getElementById("tdmain5").style.color
= "White";
document.getElementById("tr5").style.display
= 'block';
document.getElementById("tr2").style.display
= 'none';
document.getElementById("tr3").style.display
= 'none';
document.getElementById("tr4").style.display
= 'none';
document.getElementById("tr1").style.display
= 'none';
document.getElementById("tr6").style.display
= 'none';
}
function Show6()
{
document.getElementById("tdmain6").style.backgroundColor
= "#780000";
document.getElementById("tdmain6").style.color
= "White";
document.getElementById("tr6").style.display
= 'block';
document.getElementById("tr2").style.display
= 'none';
document.getElementById("tr3").style.display
= 'none';
document.getElementById("tr4").style.display
= 'none';
document.getElementById("tr5").style.display
= 'none';
document.getElementById("tr1").style.display
= 'none';
}
</script>
Here we set the property according to our requirement.
The Output Will be:
Step3: Now we write the function for the
onmouseout event in the javascript:
function
Hide1()
{
document.getElementById("tdmain1").style.backgroundColor
= "Gray";
document.getElementById("tdmain1").style.color
= "Black";
}
function Hide2()
{
document.getElementById("tdmain2").style.backgroundColor
= "Gray";
document.getElementById("tdmain2").style.color
= "Black";
}
function Hide3()
{
document.getElementById("tdmain3").style.backgroundColor
= "Gray";
document.getElementById("tdmain3").style.color
= "Black";
}
function Hide4()
{
document.getElementById("tdmain4").style.backgroundColor
= "Gray";
document.getElementById("tdmain4").style.color
= "Black";
}
function Hide5()
{
document.getElementById("tdmain5").style.backgroundColor
= "Gray";
document.getElementById("tdmain5").style.color
= "Black";
}
function Hide6()
{
document.getElementById("tdmain6").style.backgroundColor
= "Gray";
document.getElementById("tdmain6").style.color
= "Black";
}