Here we create a simple Menu Button. When we click on it, it shows a Menu.Step 1: Here we take a Button Control (mnubtn1) and a Table (tblmenu) to show the Menu.<input id="mnubtn1" type="button" value="Menu v" style="background-color: #999999; color: #FFFFFF;" /><table id="tblmenu" border="1"><tr><td><a id="lnkmsn" href="http://in.msn.com">MSN</a></td></tr><tr><td><a id="lnkyahoo" href="http://www.yahoo.com">Yahoo</a></td></tr><tr><td><a id="lnkgoogle" href="http://www.google.com">Google</a></td></tr></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).Step 3: Now we set the JavaScript functions on the Button.<input id="mnubtn1" type="button" value="Menu v" onmouseover="Show()" 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.function Show() {document.getElementById('mnubtn1').style.backgroundColor = "Blue";document.getElementById('mnubtn1').style.color = "White";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).function Hide() {document.getElementById('mnubtn1').style.backgroundColor = "#999999";document.getElementById('mnubtn1').style.color = "White";document.getElementById('tblmenu').style.display = 'None';}
<script language="javascript" type="text/javascript"> function Show() { document.getElementById('mnubtn1').style.backgroundColor = "Blue"; document.getElementById('mnubtn1').style.color = "White"; document.getElementById('tblmenu').style.display = 'Block'; } function Hide() { document.getElementById('mnubtn1').style.backgroundColor = "#999999"; document.getElementById('mnubtn1').style.color = "White"; document.getElementById('tblmenu').style.display = 'None'; } </script>
You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.
Become a sharper developer and jumpstart your career.
$0
$
. 00
monthly
For Basic members:
$20
For Premium members:
$45
For Elite members: