Sunday, August 3, 2008

Dynamic Html and CSS menu


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>menu</title>
<style type="text/css">
.MainDivStyle
{
background-color:#66ccff;
width:200px;
position:absolute;
}
.td
{
width:200px;
}
.inDiv
{
font-weight:bolder;
cursor:pointer;
}
.outDiv
{
font-weight:normal;
}
</style>
<script language="javascript" type="text/javascript">
/* This function recives a given div id and the desired height as arguments in deed it must be like "600px"
for example, it changes the div height according to the hght variable */
function ExpandOrCollapse(divID,hght)
{
document.getElementById(divID).style.height = hght;
}
/*This function is done for the sub elements in order to change their font to bold and
personalise the cursor as pointer, see inDiv css class above
*/
function indiv(DivID)
{
document.getElementById(DivID).className= "inDiv";
}
/*This function is done for the sub elements in order to change their font to bold and
personalise the cursor as pointer, see inDiv css class above
*/
function outdiv(DivID)
{
document.getElementById(DivID).className= "outDiv";
}
</script>
</head>
<body onload="ExpandOrCollapse('element1','20px');ExpandOrCollapse('element2','20px');ExpandOrCollapse('element3','20px');ExpandOrCollapse('element4','20px');">
<center>
<table>
<tr>
<td class="td">
<div id="element1" class="MainDivStyle" onmouseout="ExpandOrCollapse('element1','20px');"
onmouseover="ExpandOrCollapse('element1','110px');">
<center>
<span style="color: White; font-size: large">Element1</span></center>
<div id="element11" onclick="alert('Element11')" onmouseover="indiv('element11');" onmouseout="outdiv('element11');">
<center>
<span style="color: White; font-size: large">Element 11</span></center>
</div>
<div id="element12" onclick="alert('Element12')" onmouseover="indiv('element12');" onmouseout="outdiv('element12');">
<center>
<span style="color: White; font-size: large">Element 12</span></center>
</div>
<div id="element13" onclick="alert('Element13')" onmouseover="indiv('element13');" onmouseout="outdiv('element13');">
<center>
<span style="color: White; font-size: large">Element 13</span></center>
</div>
<div id="element14" onclick="alert('Element14')" onmouseover="indiv('element14');" onmouseout="outdiv('element14');">
<center>
<span style="color: White; font-size: large">Element 14</span></center>
</div>
</div>
</td>
<td class="td">
<div id="element2" class="MainDivStyle" onmouseout="ExpandOrCollapse('element2','20px');"
onmouseover="ExpandOrCollapse('element2','110px');">
<center>
<span style="color: White; font-size: large">Element2</span></center>
<div id="element21" onclick="alert('Element21')" onmouseover="indiv('element21');" onmouseout="outdiv('element21');">
<center>
<span style="color: White; font-size: large">Element 21</span></center>
</div>
<div id="element22" onclick="alert('Element22')" onmouseover="indiv('element22');" onmouseout="outdiv('element22');">
<center>
<span style="color: White; font-size: large">Element 22</span></center>
</div>
<div id="element23" onclick="alert('Element23')" onmouseover="indiv('element23');" onmouseout="outdiv('element23');">
<center>
<span style="color: White; font-size: large">Element 23</span></center>
</div>
<div id="element24" onclick="alert('Element24')" onmouseover="indiv('element24');" onmouseout="outdiv('element24');">
<center>
<span style="color: White; font-size: large">Element 24</span></center>
</div>
</div>
</td>
<td class="td">
<div id="element3" class="MainDivStyle" onmouseout="ExpandOrCollapse('element3','20px');"
onmouseover="ExpandOrCollapse('element3','110px');">
<center>
<span style="color: White; font-size: large">Element3</span></center>
<div id="element31" onclick="alert('Element31')" onmouseover="indiv('element31');" onmouseout="outdiv('element31');">
<center>
<span style="color: White; font-size: large">Element 31</span></center>
</div>
<div id="element32" onclick="alert('Element32')" onmouseover="indiv('element32');" onmouseout="outdiv('element32');">
<center>
<span style="color: White; font-size: large">Element 32</span></center>
</div>
<div id="element33" onclick="alert('Element33')" onmouseover="indiv('element33');" onmouseout="outdiv('element33');">
<center>
<span style="color: White; font-size: large">Element 33</span></center>
</div>
<div id="element34" onclick="alert('Element34')" onmouseover="indiv('element34);" onmouseout="outdiv('element34');">
<center>
<span style="color: White; font-size: large">Element 34</span></center>
</div>
</div>
</td>
<td class="td">
<div id="element4" class="MainDivStyle" onmouseout="ExpandOrCollapse('element4','20px');"
onmouseover="ExpandOrCollapse('element4','110px');">
<center>
<span style="color: White; font-size: large">Element4</span></center>
<div id="element41" onclick="alert('Element41')" onmouseover="indiv('element41');" onmouseout="outdiv('element41');" >
<center>
<span style="color: White; font-size: large">Element 41</span></center>
</div>
<div id="element42" onclick="alert('Element42')" onmouseover="indiv('element42');" onmouseout="outdiv('element42');">
<center>
<span style="color: White; font-size: large">Element 42</span></center>
</div>
<div id="element43" onclick="alert('Element43')" onmouseover="indiv('element43');" onmouseout="outdiv('element43');">
<center>
<span style="color: White; font-size: large">Element 43</span></center>
</div>
<div id="element44" onclick="alert('Element44')" onmouseover="indiv('element44');" onmouseout="outdiv('element44');">
<center>
<span style="color: White; font-size: large">Element 44</span></center>
</div>
</div>
</td>
</tr>
</table>

</center>
</body>
</html>


No comments: