hi people,
My problem is that I need to build a dynamic menu (preferably that
works in all the browsers) that appears when I mouseover a certain
link.
The problem is that I have to declare the menu content in the same
part of the page where the menu goes (BODY). The content of the page
is generated dynamically so I can't put the menu content it on the
headers.
I worked around this problem with this:
this goes in the <head>:
<script type="text/javascript">
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsBy TagName("span");
//DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>
example of the html text in the pages:
<span id="masterdiv"><span class="menutitle"
onMouseOver="SwitchMenu('sub1')" onMouseout="window.status=''; return
true">Menu1</span>
<span class="submenu" id="sub1"> menu text<br> menu text<br> menu
text<br></span></span><p>
<span id="masterdiv"><span class="menutitle"
onMouseOver="SwitchMenu('sub2')" onMouseout="window.status=''; return
true">Menu2</span>
<span class="submenu" id="sub1"> menu text<br> menu text<br> menu
text<br></span></span>
The problem is that it looks awful... and it breaks the page...
any ideas?
cordially,
stromboli
