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>


Comments

Author: Arun Kumar20 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: MASNSN22 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 Kumar23 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: MASNSN23 Aug 2008 Member Level: Gold   Points : 0

Have you altready try it

Author: Arun Kumar24 Aug 2008 Member Level: Gold   Points : 1

Ya. I tried but got confused while generating dynamic elements. And the formatting get collapsed.

Author: MASNSN26 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.



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: