[Beschreibung]
DHTML- Menu mit Baumstruktur
[Kompatibilität]
[Code]
<style type="text/css"> a {text-decoration: none;} .title {position: absolute; width: 100px; height: 20px; left: 10px; z-index: 10; font-family: verdana, helvetica, sans-serif; font-weight: bold; font-size: 12px;} .submenu {position: absolute; left: 25px; width: 120px; border: 1px solid black; background-color: yellow; layer-background-color: yellow; font-family: verdana, helvetica, sans-serif; font-size: 10px; visibility: hidden;} </style>
<script language="JavaScript"> <!-- Begin /* This script was written by an unknown coder * and was modified by N8i (www.nightfire.ch) * This script works with all DOM compliant browsers */ //Browser Sniffer var ns4up = (document.layers) ? 1 : 0; var ie4up = (document.all) ? 1 : 0; var mozup = (!document.all && document.getElementById) ? 1 : 0; var nummenus = 4; // Number of menus var titlearray = new Array(); // An array for the title objects var submenuarray = new Array(); // An array for the submenu objects if (ns4up) { // Set visibility for NN, Moz and IE visible = 'show'; hidden = 'hide'; } else if (ie4up || mozup) { visible = 'visible'; hidden = 'hidden'; } // Fills the arrays with title and submenu objects for (var i = 0; i < nummenus; i++) { titlearray[i] = ('title' + i); submenuarray[i] = ('submenu' +i); } // Changes image when category is clicked function picopen(n) { title = ('title' + n); pic = ('pic' + n); if (ns4up) { document.layers[title].document.images[pic].src = "opened.gif"; } if (document.all) { document.all(pic).src = "opened.gif"; } if (mozup) { document.getElementById(title).firstChild.src = "opened.gif"; } } function picclose(n) { title = ('title' + n); pic = ('pic' + n); if (ns4up) { document.layers[title].document.images[pic].src = "closed.gif"; } if (ie4up) { document.all(pic).src = "closed.gif"; } if (mozup) { document.getElementById(title).firstChild.src = "closed.gif"; } } function toggle(n,move) { menu = ('submenu' + n); if (ns4up) { submenu = document.layers[menu]; } if (ie4up) { submenu = document.all(menu).style; } if (mozup) { submenu = document.getElementById(menu).style; } if (submenu.visibility == visible) { submenu.visibility = hidden; picclose(n); for (var i = (n+1); i < nummenus; i++) { if (ns4up) { document.layers[titlearray[i]].top -= move; document.layers[submenuarray[i]].top -= move; } if (ie4up) { document.all(titlearray[i]).style.pixelTop -= move; document.all(submenuarray[i]).style.pixelTop -= move; } if (mozup) { posa = parseInt(document.getElementById(titlearray[i]).style.top, 10); posb = parseInt(document.getElementById(submenuarray[i]).style.top, 10); document.getElementById(titlearray[i]).style.top = posa-move; document.getElementById(submenuarray[i]).style.top = posb-move; } } } else { submenu.visibility = visible; picopen(n); for (var i = (n+1); i < nummenus; i++) { if (ns4up) { document.layers[titlearray[i]].top += move; document.layers[submenuarray[i]].top += move; } if (ie4up) { document.all(titlearray[i]).style.pixelTop += move; document.all(submenuarray[i]).style.pixelTop += move; } if (mozup) { posa = parseInt(document.getElementById(titlearray[i]).style.top, 10); posb = parseInt(document.getElementById(submenuarray[i]).style.top, 10); document.getElementById(titlearray[i]).style.top = posa+move; document.getElementById(submenuarray[i]).style.top = posb+move; } } } lastmenu = submenu; } // End --> </SCRIPT>
<div class="title" id="title0" style="top: 0px"> <a href="#" onclick="javascript: toggle(0,30); return false"><img name="pic0" src="closed.gif" border="0">Category 1</a> </div> <div class="submenu" id="submenu0" style="top: 20px"> <a href="dummy.htm" target="right">Item # 1</a><br> <a href="dummy.htm" target="right">Item # 2</a> </div> <div class="title" id="title1" style="top: 20px"> <a href="#" onclick="javascript: toggle(1,60); return false"><img name="pic1" src="closed.gif" border="0">Category 2</a> </div> <div class="submenu" id="submenu1" style="top: 40px"> <a href="dummy.htm" target="right">Item # 3</a><br> <a href="dummy.htm" target="right">Item # 4</a><br> <a href="dummy.htm" target="right">Item # 5</a><br> <a href="dummy.htm" target="right">Item # 6</a> </div> <div class="title" id="title2" style="top: 40px"> <a href="#" onclick="javascript: toggle(2,45); return false"><img name="pic2" src="closed.gif" border="0">Category 3</a> </div> <div class="submenu" id="submenu2" style="top: 60px"> <a href="dummy.htm" target="right">Item # 7</a><br> <a href="dummy.htm" target="right">Item # 8</a><br> <a href="dummy.htm" target="right">Item # 9</a> </div> <div class="title" id="title3" style="top: 60px"> <a href="#" onclick="javascript: toggle(3,60); return false"><img name="pic3" src="closed.gif" border="0">Category 4</a> </div> <div class="submenu" id="submenu3" style="top: 80px"> <a href="dummy.htm" target="right">Item # 10</a><br> <a href="dummy.htm" target="right">Item # 11</a><br> <a href="dummy.htm" target="right">Item # 12</a><br> <a href="dummy.htm" target="right">Item # 13</a> </div>
?? modified by N8i (www.nightfire.ch)