Jag hittade ett kanonbra script här på forumet som Jojoxx hade knåpat ihop. Men nu försöker jag göra vissa modifieringar och det går inte så bra.
Menyn är från början vertikal, men jag vill göra den horizontell. Problemet är att när jag försöker klämma in en tabell mellan "meny-divarna" så ballar funktionaliteten helt. Jag lyckades göra två oberoende menyalternativ men sen blev det stopp (koden nedan fungerar alltså). Jag behöver minst 6 menyalternativ! Någon som sitter på en lösning?
Jag behöver heller inte ha menyn i fler än en nivå, här är den dynamisk i oändligheten. Gissar att man kan kapa en del kod med anledning av detta. Alla tips mottages tacksamt! :)
Javascriptet:
<script language="JavaScript">
var compressedMode = false;
var collapseMode = false;
function initMenus(){
if(!document.getElementById){ return }
var current=document.getElementById('menuroot').firstChild;
while(current){
if(current.className=="menu"){ collapseAll(current); }
current=current.nextSibling;
}
if(!document.getElementById('menuroot2')){return}
var current=document.getElementById('menuroot2').firstChild;
while(current){
if(current.className=="menu"){ collapseAll(current); }
current=current.nextSibling;
}
}
String.prototype.right = function(len){ return this.substring(this.length-len); }
function collapseAll(element){
if(!document.getElementById){ return }
menues=getAllChildsByTagName(element,"div");
for(var i in menues){
menues[i].style.display="none";
}
element.style.display="none";
}
function getAllChildsByTagName(element,tagname){
var parents=new Array(); var elements=new Array(); var current;
parents[0]=element;
for(var i in parents){
current=parents[i].firstChild;
while(current){
if(current.hasChildNodes){ parents[parents.length]=current; }
if(current.tagName==tagname.toUpperCase()){elements[elements.length]=current;}
current=current.nextSibling;
}
}
return elements;
}
function sw(mnu){
if(!document.getElementById){ return false; }
if(document.getElementById(mnu).style.display=='block'){
if(collapseMode){
collapseAll(document.getElementById(mnu));
}
else {
document.getElementById(mnu).style.display='none';
}
}
else {
if(document.getElementById(mnu).parentNode.className=="menu" && compressedMode){
collapseAll(document.getElementById(mnu).parentNode);
document.getElementById(mnu).parentNode.style.display="block";
}
document.getElementById(mnu).style.display="block";
}
return false;
}
</script>
Och html-koden:
<body onload="initMenus();">
<form runat="server">
<table width="600">
<tr>
<td width="200" valign="top">
<div id="menuroot" class="rootmenu">
<a class="menuChoice" onClick="return sw('Menu1');">MENY 1</a><br>
<div id="Menu1" class="menu">
<a class="menuLink" href="/intranet/Frame_Default/Default.aspx" target="Main">UNDERMENY
1</a><br>
</div>
</div>
</td>
<td width="200" valign="top">
<a class="menuChoice" onClick="return sw('Menu2');">MENY 2</a><br>
<div id="Menu2" class="menu">
<a class="menuLink" href="/intranet/Filesystem/filepresentation.aspx?Folder=Hälsa" target="Main">
UNDERMENY 1</a><br>
<a class="menuLink" href="/intranet/Personal/Health.aspx" target="Main">UNDERMENY
2</a><br>
<a class="menuLink" href="/intranet/News/Forum.aspx?BelongsTo=Intranet&BelongsToGroup=Hälsoforum" target="Main">
UNDERMENY 3</a><br>
</div>
</td>
</tr>
</table>
</form>