Introduction

Here we create a simple Menu Button. When we click on it, it shows a Menu.
MenujScri1.gif
Step 1: Here we take a Button Control (mnubtn1) and a Table (tblmenu) to show the Menu.
  1. <input id="mnubtn1" type="button" value="Menu v" style="background-color: #999999; color: #FFFFFF;" />
  2. <table id="tblmenu" border="1">
  3. <tr>
  4. <td>
  5. <a id="lnkmsn" href="http://in.msn.com">MSN</a>
  6. </td>
  7. </tr>
  8. <tr>
  9. <td>
  10. <a id="lnkyahoo" href="http://www.yahoo.com">Yahoo</a>
  11. </td>
  12. </tr>
  13. <tr>
  14. <td>
  15. <a id="lnkgoogle" href="http://www.google.com">Google</a>
  16. </td>
  17. </tr>
  18. </table>
Step 2: Now we set the display property of the Table (tblmenu) to "None", since we want to display the menu only on the onmouseover of the Button(mnubtn1).
MenujScri2.gif
Step 3: Now we set the JavaScript functions on the Button.
  1. <input id="mnubtn1" type="button" value="Menu v" onmouseover="Show()"
  2. onmouseout="Hide()" style="background-color: #999999; color: #FFFFFF;" />
Show(): This function is used to change the color of the Button (mnubtn1) and used to show the Menu (tblmenu) on the onmouseover of the Button.
  1. function Show() {
  2. document.getElementById('mnubtn1').style.backgroundColor = "Blue";
  3. document.getElementById('mnubtn1').style.color = "White";
  4. document.getElementById('tblmenu').style.display = 'Block';
  5. }
Note: Here display='Block' is used to display the Menu (tblmenu) as a block.
Hide(): This function is used to set the default Button Color and used to hide the Menu (tblmenu) on the onmouseout of the Button (mnubtn1).
  1. function Hide() {
  2. document.getElementById('mnubtn1').style.backgroundColor = "#999999";
  3. document.getElementById('mnubtn1').style.color = "White";
  4. document.getElementById('tblmenu').style.display = 'None';
  5. }
  6. <script language="javascript" type="text/javascript">
  7. function Show() {
  8. document.getElementById('mnubtn1').style.backgroundColor = "Blue";
  9. document.getElementById('mnubtn1').style.color = "White";
  10. document.getElementById('tblmenu').style.display = 'Block';
  11. }
  12. function Hide() {
  13. document.getElementById('mnubtn1').style.backgroundColor = "#999999";
  14. document.getElementById('mnubtn1').style.color = "White";
  15. document.getElementById('tblmenu').style.display = 'None';
  16. }
  17. </script>