[MenuCategory]

Category 1
Category 2
Category 3
Category 4















DHTML- Menu mit Baumstruktur

[Kompatibilität]

[zwischen <HEAD> und </HEAD>]

<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>

[zwischen <BODY> und </BODY>]

<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>

[Autor]

??
modified by N8i (www.nightfire.ch)

[Download]

Copyright © 1998- Nightfire Webworker Archiv Script No: 0190