Post
Ask Question

How to Create Simple Menu in JavaScript

Introduction

 
In this article, we will discuss how we create a simple menu in javascript, for this follow these steps:
 
Step1: First we create two tables like this:
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.   
  3.     <head>  
  4.         <title>Untitled Page</title>  
  5.     </head>  
  6.   
  7.     <body>  
  8.         <table border="1" width="100%">  
  9.             <tr align="center" style="background-color: Gray;">  
  10.                 <td id="tdmain1" onmouseover="Show1()" onmouseout="Hide1()">  
  11.                     Home  
  12.                 </td>  
  13.                 <td id="tdmain2" onmouseover="Show2()" onmouseout="Hide2()">  
  14.                     City  
  15.                 </td>  
  16.                 <td id="tdmain3" onmouseover="Show3()" onmouseout="Hide3()">  
  17.                     Sports  
  18.                 </td>  
  19.                 <td id="tdmain4" onmouseover="Show4()" onmouseout="Hide4()">  
  20.                     World  
  21.                 </td>  
  22.                 <td id="tdmain5" onmouseover="Show5()" onmouseout="Hide5()">  
  23.                     Buisness  
  24.                 </td>  
  25.                 <td id="tdmain6" onmouseover="Show6()" onmouseout="Hide6()">  
  26.                     Tech  
  27.                 </td>  
  28.             </tr>  
  29.         </table>  
  30.         <table border="1" width="100%">  
  31.             <tr id="tr1" align="center" style="display: none;">  
  32.                 <td>  
  33.                     Opinion  
  34.                 </td>  
  35.                 <td>  
  36.                     Blogs  
  37.                 </td>  
  38.                 <td>  
  39.                     Auto  
  40.                 </td>  
  41.                 <td>  
  42.                     Polls  
  43.                 </td>  
  44.                 <td>  
  45.                     Speak Out  
  46.                 </td>  
  47.             </tr>  
  48.             <tr id="tr2" align="center" style="display: none;">  
  49.                 <td>  
  50.                     Mumbai  
  51.                 </td>  
  52.                 <td>  
  53.                     Delhi  
  54.                 </td>  
  55.                 <td>  
  56.                     Banglore  
  57.                 </td>  
  58.                 <td>  
  59.                     Hyderabad  
  60.                 </td>  
  61.                 <td>  
  62.                     Chennai  
  63.                 </td>  
  64.             </tr>  
  65.             <tr id="tr3" align="center" style="display: none;">  
  66.                 <td>  
  67.                     Cricket  
  68.                 </td>  
  69.                 <td>  
  70.                     Tennis  
  71.                 </td>  
  72.                 <td>  
  73.                     Badminton  
  74.                 </td>  
  75.                 <td>  
  76.                     Hockey  
  77.                 </td>  
  78.                 <td>  
  79.                     Base Ball  
  80.                 </td>  
  81.             </tr>  
  82.             <tr id="tr4" align="center" style="display: none;">  
  83.                 <td>  
  84.                     India </td>  
  85.                 <td>  
  86.                     Australia  
  87.                 </td>  
  88.                 <td>  
  89.                     America  
  90.                 </td>  
  91.                 <td>  
  92.                     China  
  93.                 </td>  
  94.                 <td>  
  95.                     Bangladesh  
  96.                 </td>  
  97.             </tr>  
  98.             <tr id="tr5" align="center" style="display: none;">  
  99.                 <td>  
  100.                     Indian Buisness  
  101.                 </td>  
  102.                 <td>  
  103.                     International Buisness  
  104.                 </td>  
  105.                 <td>  
  106.                     Polls  
  107.                 </td>  
  108.                 <td>  
  109.                     Ups and Downs  
  110.                 </td>  
  111.                 <td>  
  112.                     Speak Out  
  113.                 </td>  
  114.             </tr>  
  115.             <tr id="tr6" align="center" style="display: none;">  
  116.                 <td>  
  117.                     News  
  118.                 </td>  
  119.                 <td>  
  120.                     Personal Tech  
  121.                 </td>  
  122.                 <td>  
  123.                     Careers  
  124.                 </td>  
  125.                 <td>  
  126.                     Social Media  
  127.                 </td>  
  128.             </tr>  
  129.         </table>  
  130.     </body>  
  131.   
  132. </html> 
Step 2: Now we write the javascript function for the onmouseover event:
  1. <script language="javascript">  
  2. function Show1() {  
  3.     document.getElementById("tdmain1").style.backgroundColor = "#780000";  
  4.     document.getElementById("tdmain1").style.color = "White";  
  5.     document.getElementById("tr1").style.display = 'block';  
  6.     document.getElementById("tr2").style.display = 'none';  
  7.     document.getElementById("tr3").style.display = 'none';  
  8.     document.getElementById("tr4").style.display = 'none';  
  9.     document.getElementById("tr5").style.display = 'none';  
  10.     document.getElementById("tr6").style.display = 'none';  
  11. }  
  12.   
  13. function Show2() {  
  14.     document.getElementById("tdmain2").style.backgroundColor = "#780000";  
  15.     document.getElementById("tdmain2").style.color = "White";  
  16.     document.getElementById("tr2").style.display = 'block';  
  17.     document.getElementById("tr1").style.display = 'none';  
  18.     document.getElementById("tr3").style.display = 'none';  
  19.     document.getElementById("tr4").style.display = 'none';  
  20.     document.getElementById("tr5").style.display = 'none';  
  21.     document.getElementById("tr6").style.display = 'none';  
  22.   
  23. }  
  24.   
  25. function Show3() {  
  26.     document.getElementById("tdmain3").style.backgroundColor = "#780000";  
  27.     document.getElementById("tdmain3").style.color = "White";  
  28.     document.getElementById("tr3").style.display = 'block';  
  29.     document.getElementById("tr2").style.display = 'none';  
  30.     document.getElementById("tr1").style.display = 'none';  
  31.     document.getElementById("tr4").style.display = 'none';  
  32.     document.getElementById("tr5").style.display = 'none';  
  33.     document.getElementById("tr6").style.display = 'none';  
  34.   
  35. }  
  36.   
  37. function Show4() {  
  38.     document.getElementById("tdmain4").style.backgroundColor = "#780000";  
  39.     document.getElementById("tdmain4").style.color = "White";  
  40.     document.getElementById("tr4").style.display = 'block';  
  41.     document.getElementById("tr2").style.display = 'none';  
  42.     document.getElementById("tr3").style.display = 'none';  
  43.     document.getElementById("tr1").style.display = 'none';  
  44.     document.getElementById("tr5").style.display = 'none';  
  45.     document.getElementById("tr6").style.display = 'none';  
  46.   
  47. }  
  48.   
  49. function Show5() {  
  50.     document.getElementById("tdmain5").style.backgroundColor = "#780000";  
  51.     document.getElementById("tdmain5").style.color = "White";  
  52.     document.getElementById("tr5").style.display = 'block';  
  53.     document.getElementById("tr2").style.display = 'none';  
  54.     document.getElementById("tr3").style.display = 'none';  
  55.     document.getElementById("tr4").style.display = 'none';  
  56.     document.getElementById("tr1").style.display = 'none';  
  57.     document.getElementById("tr6").style.display = 'none';  
  58.   
  59. }  
  60.   
  61. function Show6() {  
  62.     document.getElementById("tdmain6").style.backgroundColor = "#780000";  
  63.     document.getElementById("tdmain6").style.color = "White";  
  64.     document.getElementById("tr6").style.display = 'block';  
  65.     document.getElementById("tr2").style.display = 'none';  
  66.     document.getElementById("tr3").style.display = 'none';  
  67.     document.getElementById("tr4").style.display = 'none';  
  68.     document.getElementById("tr5").style.display = 'none';  
  69.     document.getElementById("tr1").style.display = 'none';  
  70.   
  71. }  
  72. </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:
  1. function Hide1() {  
  2.     document.getElementById("tdmain1").style.backgroundColor = "Gray";  
  3.     document.getElementById("tdmain1").style.color = "Black";  
  4. }  
  5.   
  6. function Hide2() {  
  7.     document.getElementById("tdmain2").style.backgroundColor = "Gray";  
  8.     document.getElementById("tdmain2").style.color = "Black";  
  9. }  
  10.   
  11. function Hide3() {  
  12.     document.getElementById("tdmain3").style.backgroundColor = "Gray";  
  13.     document.getElementById("tdmain3").style.color = "Black";  
  14. }  
  15.   
  16. function Hide4() {  
  17.     document.getElementById("tdmain4").style.backgroundColor = "Gray";  
  18.     document.getElementById("tdmain4").style.color = "Black";  
  19. }  
  20.   
  21. function Hide5() {  
  22.     document.getElementById("tdmain5").style.backgroundColor = "Gray";  
  23.     document.getElementById("tdmain5").style.color = "Black";  
  24. }  
  25.   
  26. function Hide6() {  
  27.     document.getElementById("tdmain6").style.backgroundColor = "Gray";  
  28.     document.getElementById("tdmain6").style.color = "Black";  
  29. }