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>
|
| Author: Arun Kumar 20 Aug 2008 | Member Level: Gold Points : 1 |
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.
|
| Author: MASNSN 22 Aug 2008 | Member Level: Gold Points : 2 |
I propose a solution to create elements dynamically, is that you use the document.write();
for example:
HTMLCode = "";
function GenerateContextMenu()
{
HTMLCode= " onmouseover='ExpandOrCollapse('element4','110px');">
}
with this manner you can create a html code dynamically
|
| Author: Arun Kumar 23 Aug 2008 | Member Level: Gold Points : 1 |
| Here HTMLCode= "" is a variable . Right? What value do we've to pass? The passed like this at GenerateContextMenu()
document.getElementById(divID).style.height = hght;
now we have to write an HTML code for an element using the above code within this function. Am I correct?
|
| Author: MASNSN 23 Aug 2008 | Member Level: Gold Points : 0 |
Have you altready try it
|
| Author: Arun Kumar 24 Aug 2008 | Member Level: Gold Points : 1 |
Ya. I tried but got confused while generating dynamic elements. And the formatting get collapsed.
|
| Author: MASNSN 26 Aug 2008 | Member Level: Gold Points : 2 |
OK, the expand and collapse method recives a div and the height of the corresponding Div as arguments, then it modifiy the height of the div
if it is 0 then it is collapsed and invisible by the way
else if I pass for example element4 and 110px, I indicate that the div with id="element4" should has a height of 110px.
|