|
|
hello all
i am new to dhtml, i wanna add some menu in my website i am wondering..... and get a code from the w3shcools that was very useful code for me but i want to add some thing but i am unable.
Please any one help me that i want to make tree menu for my website, please any one can help me so give me a favour i will be very thankfull to you.
Following is my code which i am trying to do.
Thankss in advance
<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:#0B8BCC}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<STYLE TYPE="text/css">
#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
A:link {color:black; text-decoration:none}
A:hover {color:blue; text-decoration:underline}
</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>
<table width="30%">
<tr bgcolor="#0B8BCC">
<td onmouseover="showmenu('mobex')" onmouseout="hidemenu('mobex')">
<a href="#">Mobex</a><br />
<table class="menu" id="mobex" width="12">
<tr><td class="menu"><a href="#">About us</a></td></tr>
<tr><td class="menu" onmouseover="showmenu('mobex_4')" onmouseout="hidemenu('mobex_4')"><a href="#">Mission</a>
</td>
<td>
<table class="menu" id="mobex_4" width="12">
<tr><td class="menu"><a href="#">About us</a></td></tr>
<tr><td class="menu"><a href="#">Mission</a></td></tr>
<tr><td class="menu"><a href="#">Vision</a></td></tr>
<tr><td class="menu"><a href="#">Career</a></td></tr>
<tr><td class="menu"><a href="#">Portfolio</a></td></tr>
</table>
</td>
</tr>
<tr><td class="menu"><a href="#">Vision</a></td></tr>
<tr><td class="menu"><a href="#">Career</a></td></tr>
<tr><td class="menu"><a href="#">Portfolio</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('mobex_1')" onmouseout="hidemenu('mobex_1')">
<a href="#">Mobex_1</a><br />
<table class="menu" id="mobex_1" width="12">
<tr><td class="menu"><a href="#">About us</a></td></tr>
<tr><td class="menu"><a href="#">Mission</a></td></tr>
<tr><td class="menu"><a href="#">Vision</a></td></tr>
<tr><td class="menu"><a href="#">Career</a></td></tr>
<tr><td class="menu"><a href="#">Portfolio</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('mobex_2')" onmouseout="hidemenu('mobex_2')">
<a href="#">Mobex_2</a><br />
<table class="menu" id="mobex_2" width="12">
<tr><td class="menu"><a href="#">About us</a></td></tr>
<tr><td class="menu"><a href="#">Mission</a></td></tr>
<tr><td class="menu"><a href="#">Vision</a></td></tr>
<tr><td class="menu"><a href="#">Career</a></td></tr>
<tr><td class="menu"><a href="#">Portfolio</a></td></tr>
</table>
</td>
</tr>
</table>
<TABLE BORDER="0">
<TD VALIGN="top" Width="200">
<SPAN onMouseOver="document.all.menu1.style.display = 'block'"
onMouseOut="document.all.menu1.style.display = 'block'">
Goodies Tutorials<BR>
</SPAN>
<SPAN ID="menu1" onClick="document.all.menu1.style.display = 'none'">
<A HREF="/tutors/frame1.html">Frames</A><BR>
<A HREF="/tutors/tbl.html">Tables</A><BR>
<A HREF="/beyond/dhtml.html">DHTML</A><BR>
<A HREF="/tutors/forms.html">Forms</A>
</SPAN>
</TD>
</TABLE>
</body>
</html>
kaukab
|
|
|
|
|
|
|
// |
Ali007
