Menu Button in JavaScript

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';  
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>  


Similar Articles