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.getEl ementById){ //DynamicDrive.co m change
document.write( '<style type="text/css">\n')
document.write( '.submenu{displ ay: none;}\n')
document.write( '</style>\n')
}
function SwitchMenu(obj) {
if(document.get ElementById){
var el = document.getEle mentById(obj);
var ar = document.getEle mentById("maste rdiv").getEleme ntsByTagName("s pan");
//DynamicDrive.co m change
if(el.style.dis play != "block"){ //DynamicDrive.co m change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="su bmenu") //DynamicDrive.co m change
ar[i].style.display = "none";
}
el.style.displa y = "block";
}else{
el.style.displa y = "none";
}
}
}
</script>
example of the html text in the pages:
<span id="masterdiv"> <span class="menutitl e"
onMouseOver="Sw itchMenu('sub1' )" onMouseout="win dow.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="menutitl e"
onMouseOver="Sw itchMenu('sub2' )" onMouseout="win dow.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
