Cascade Menü - Website X5 Helpsite

class="Obj12_frm" name="Cascademenu" src="wsX5Obj/Obj12_0/cascade.html">

background-color: #2b6ebb;

border: 1px solid #008;

font-family: Verdana;

position: absolute;

font-weight: bold;

padding-top: 3px;

padding-left: 3px;

font-size: 12px;

cursor: pointer;

width: 150px;

color: #fff;

}

background-color: #e9f0f8;

font-family: Verdana; font-size: 12px;

line-height: 150%;  

border-left: 1px solid #008;

border-right: 1px solid #008;

padding-left: 3px;

}

// Menüeinträge: Bezeichnung | Link mit http:// | target= [_self, _parent, _blank]

Link[0]  = '0| Hauptmenü 1';

Link[1]  = '1| Startseite | ../../index.php | target="_parent" |';

Link[2]  = '1| Untermenü 1.2 | #x | target="_blank" |';

Link[3]  = '1| Untermenü 1.3 | #x | target="_parent" |';

Link[4]  = '1| Untermenü 1.4 | #x | target="_parent" |';

Link[5]  = '0| Hauptmenü 2';

Link[6]  = '1| Untermenü 2.1 | #x | target="_parent" |';

Link[7]  = '1| Untermenü 2.2 | #x | target="_parent" |';

Link[8]  = '0| Hauptmenü 3';

Link[9]  = '1| Untermenü 3.1 | #x | target="_parent" |';

Link[10] = '1| Untermenü 3.2 | #x | target="_parent" |';

Link[11] = '0| Hauptmenü 4';

Link[12] = '1| Untermenü 4.1 | #x | target="_parent" |';

Link[13] = '1| Untermenü 4.2 | #x | target="_parent" |';

Link[14] = '1| Untermenü 4.3 | #x | target="_parent" |';

var height    = 22;        // Höhe Hauptmenü

var iheight   = 22;        // Höhe Untermenüs

var bgc       = '#e9f0f8'  // Hintergrundfarbe Untermenüs

var over_bgc  = '#fff';    // Hintergrundfarbe Untermenüs Mouseover

var tc        = '#000'     // Textfarbe Untermenü

var over_tc   = '#004891'; // Textfarbe Untermenü Mouseover

var speed     = 5;         // Öffnungsgeschwindigkeit

var timerID   = 0;

var width     = 155;       // Breite Menü (Vorsicht, CSS beachten

var N         = (document.all) ? 0 : 1;

var self_menu = new Array();

function write_menu() {

smc   = 0;

mn    = 0;

mni   = 1;

start = -1;

document.write('<div style="position: absolute;">');

for (var i = 0; i < Link.length; i++) {

la = Link[i].split('|');

if (la[0] == 0) {

if (start == 0) {

document.write('</div>');

h = csmc * iheight;

tmn = mn; // - h;

self_menu[smc] = new Array(tmn, h, 0, -2);

smc++;

mn--;

}

csmc = 0;

document.write('<div id="down' + smc + '" class="Obj12_hpt" '

+ 'style="top: ' + mn + 'px; height: ' + height + 'px;" '

+ 'onclick="pull_down(' + smc + ', ' + mni + ');">'

+ '  ' + la[1] + '</div>');

self_menu[smc] = new Array(mn, height, 0, mni);

smc++;

mni++;

mn += height;

start = 1;

} else {

if (start == 1) {

if (N)

mn += 2;

document.write('<div id="down' + smc + '" class="Obj12_obj" '

+ 'style="top: '+ mn + 'px;">');

start = 0;

}

document.write('<a href="' + la[2] + '"'

+ ((la[3] != '') ? ' target="' + la[3] + '"' : '')

+ '><div id="d' + i + '" class="Obj12_sub" '

+ 'style="height: ' + iheight + 'px;'

+ ((N) ? ' width:150px;' : '')

+ '" onmouseover="color(this.id);" '

+ 'onmouseout="uncolor(this.id);">'

+ ' ' + la[1] + '</div></a>');

csmc++;

}

}

if (start == 0) {

document.write('</div>');

h =  csmc * iheight;

tmn = mn + 5; // - h;

self_menu[smc] = new Array(tmn, h, 0);

name = 'down' + (self_menu.length - 1);

obj = document.getElementById(name);

obj.style.borderBottomColor = '#008';

obj.style.borderBottomWidth = '1px';

obj.style.borderBottomStyle = 'solid';

}

document.write('</div>');

}

function color(obj) {

document.getElementById(obj).style.backgroundColor = over_bgc;

document.getElementById(obj).style.color = over_tc;

}

function uncolor(obj) {

document.getElementById(obj).style.backgroundColor = bgc;

document.getElementById(obj).style.color = tc;

}

function pull_down(nr, c) {

if (timerID == '') {

to = self_menu[nr + 1][1]

begin = nr + 2;

if (timerID != '')

clearTimeout(timerID);

if (self_menu[nr + 1][2] == 0) {

self_menu[nr + 1][2] = 1;

if (nr == (self_menu.length - 2))

to++;

epull_down(begin, to, 0);

} else {

to = 0;

self_menu[nr + 1][2] = 0;

name = 'down' + (nr + 2);

open_item = 0;

for (var i = 0; i < nr; i++)

if (self_menu[i][2] == 1)

open_item += self_menu[i][1];

if (N == false)

open_item -= (c * 1);

if (nr == (self_menu.length - 2)) {

val = self_menu[self_menu.length - 1][1];

to = -1;

} else val = parseInt(document.getElementById(name).style.top) - (open_item) - (c * height);

epull_up(begin, to, val);

}

}

}

function epull_down(nr, to, nowv) {

name = 'down' + (nr - 1);

obj = document.getElementById(name).style.clip = 'rect(0, ' + width + ', ' + (nowv + 1) + ', 0)';

for (var i = nr; i < self_menu.length; i++) {

name = 'down' + i;

obj = document.getElementById(name);

obj.style.top = parseInt(obj.style.top) + 1;

}

nowv++;

if (nowv < to)

timerID = setTimeout('epull_down(' + nr + ', ' + to + ', ' + nowv + ');', speed);

else

timerID = 0;

}

function epull_up(nr, to, nowv) {

name = 'down' + (nr - 1);

obj = document.getElementById(name).style.clip = 'rect(0, ' + width + ', ' + nowv + ', 0)';

for (var i = nr; i < self_menu.length; i++) {

name = 'down' + i;

obj = document.getElementById(name);

obj.style.top = parseInt(obj.style.top) - 1;

}

nowv--;

if(nowv > to)

timerID = setTimeout('epull_up(' + nr + ', ' + to + ', ' + nowv + ');', speed);

else

timerID = 0;

}

function startup(nr) {

write_menu();

if (nr != 0) {

for (var i = 0; i < self_menu.length; i++) {

if (self_menu[i][3] == nr)

pull_down(i, nr);

i == self_menu.length;

}

}

}

startup(0);   // 1 = Menü offen beim Start