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:
![CreateMenuUsingCSS.png]()
![CreateMenuUsingHTML.png]()
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";
}