Dynamic menu with HTML,CSS and Javascript
This code snippet shows how to create a dynamic menu using HTML and CSS
<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>
But I've a doubt that how it creates menu elements dynamic? Here you've given 44 menu elements but they are given static at html code. But how to create dynamically by some validations? Am in need of it. Help me.