Java Script Menu Control
Now develop your own menu control in java script
only, no plugin and no jquery.
Create a website and add a web page name it as
“menu.aspx”. Now design the page like this.
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Comic Sans MS;
}
table
{
font-size: 80%;
background: green;
}
a
{
color: black;
text-decoration: none;
text-align: center;
}
a:hover
{
color: lime;
font-size: larger;
}
td.menu
{
background: yellow;
}
table.menu
{
font-size: 100%;
position: absolute;
visibility: hidden;
font-family: Comic Sans MS;
}
.style1
{
width: 150px;
}
</style>
<script type="text/javascript">
function showmenu(elmnt) {
document.getElementById(elmnt).style.visibility
= "visible";
}
function hidemenu(elmnt) {
document.getElementById(elmnt).style.visibility = "hidden";
}
</script>
</head>
<body bgcolor="black">
<form id="form1" runat="server">
<div>
<h3 style="color: #00CCFF">
Java Script Drop down Menu Control By Ajit</h3>
<table align="left">
<tr bgcolor="#FF8080">
<td
onmouseover="showmenu('tutorials')"
onmouseout="hidemenu('tutorials')" style="text-align: center"
class="style1">
<a href="Default.aspx">Home</a><br />
<table
class="menu"
id="tutorials"
width="150px">
<tr>
<td class="menu">
<a href="#">About</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="#">contact</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="#">Feedback</a>
</td>
</tr>
</table>
</td>
<td
onmouseover="showmenu('scripting')"
onmouseout="hidemenu('scripting')"
style="text-align: center"
class="style1">
<a href="Default2.aspx">Interviwe
Questions</a><br />
<table
class="menu"
id="scripting"
width="150px">
<tr>
<td class="menu">
<a href="#">ASP.NET</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="#">VBScript</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="#">C#.NET</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="#">Programming
Concept</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="#">ADO.NET</a>
</td>
</tr>
</table>
</td>
<td
onmouseover="showmenu('validation')"
onmouseout="hidemenu('validation')" style="text-align: center"
class="style1">
<a href="Default3.aspx">Dot
Net Concepts</a><br />
<table
class="menu"
id="validation"
width="150px">
<tr>
<td class="menu">
<a href="#">AJAX</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="#">JQUERY</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="#">ASP.NET</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="#">C#.NET</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="#">ADO.NET</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
Now run the page with a smile..
No comments:
Post a Comment