Thursday, December 23, 2010

Javascript for drop down menu


Result:



ATLAS


TRAVEL



Source Code:
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
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>

<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>
<table><tbody>
<tr bgcolor="#ff8080">    <td align="center" onmouseout="hidemenu('ATLAS')" onmouseover="showmenu('ATLAS')" style="width: 60px;">
<a href="http://atlas.web.cern.ch/Atlas/Welcome.html"><b>ATLAS</b></a>

<table class="menu" id="ATLAS" style="width: 180px;"><tbody>
<tr><td class="menu"><a href="http://atlas.web.cern.ch/Atlas/Welcome.html">ATLAS main page</a></td></tr>
<tr><td class="menu"><a href="http://atlas.ch/">ATLAS General webpage </a></td></tr>
<tr><td class="menu"><a href="http://www.atlas-canada.ca/">
New ATLAS-Canda webpage</a></td></tr>
</tbody></table>
</td>   <td align="center" onmouseout="hidemenu('travel')" onmouseover="showmenu('travel')" style="width: 60px;">
<a href="http://www.expedia.ca/"><b>TRAVEL</b></a>

<table class="menu" id="travel" style="width: 180px;"><tbody>
<tr><td class="menu"><a href="http://www.expedia.ca/">expedica.ca</a></td></tr>
<tr><td class="menu"><a href="http://www.westjet.com/">westjet</a></td></tr>
<tr><td class="menu"><a href="http://www.aircanada.com/aco/flights.do">aircanada</a></td></tr>
<tr><td class="menu"><a href="https://www.aeroplan.com/action/cmd/login">aeroplan
</a></td></tr>
</tbody></table>
</td></tr>
</tbody></table>

No comments:

Post a Comment