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">
  3. <head>
  4. <title>Untitled Page</title>
  5. </head>
  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>
  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. }
  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';
  23. }
  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';
  35. }
  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';
  47. }
  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';
  59. }
  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';
  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. }
  6. function Hide2() {
  7. document.getElementById("tdmain2").style.backgroundColor = "Gray";
  8. document.getElementById("tdmain2").style.color = "Black";
  9. }
  11. function Hide3() {
  12. document.getElementById("tdmain3").style.backgroundColor = "Gray";
  13. document.getElementById("tdmain3").style.color = "Black";
  14. }
  16. function Hide4() {
  17. document.getElementById("tdmain4").style.backgroundColor = "Gray";
  18. document.getElementById("tdmain4").style.color = "Black";
  19. }
  21. function Hide5() {
  22. document.getElementById("tdmain5").style.backgroundColor = "Gray";
  23. document.getElementById("tdmain5").style.color = "Black";
  24. }
  26. function Hide6() {
  27. document.getElementById("tdmain6").style.backgroundColor = "Gray";
  28. document.getElementById("tdmain6").style.color = "Black";
  29. }