<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Cascade Menu</title>
<style type="text/css">
<!--
.menu
{
background-color: #2b6ebb;
border: 1px solid #008;
font-family: Verdana;
position: absolute;
font-weight: bold;
padding-top: 3px;
font-size: 10px;
cursor: pointer;
width: 150px;
color: #fff;
}
.item_panel
{
border-left: 1px solid #008;
border-right: 1px solid #008;
clip: rect(0, 150, 0, 0);
position: absolute;
width: 150px;
}
.item_panel a
{
text-decoration: none;
cursor: pointer;
color: #000;
}
.item
{
background-color: #e9f0f8;
font-family: Verdana;
font-size: 10px;
width: 148px;
}
//-->
</style>
<script type="text/javascript">
<!--
// www: http://www.javarea.de
// Copyright by javarea.de
// Link[nr] = 'position [0 is menu/1 is item] | Link name | url | target (blank|top|frame_name)'
var Link = new Array();
Link[0] = '0|Home';
Link[1] = '1|Startseite|http://freestyler-mirko.de.tl/Startseite.htm|';
Link[2] = '1|Kontakt|http://freestyler-mirko.de.tl/G.ae.stebuch.htm|';
Link[3] = '1|Gästebuch|http://freestyler-mirko.de.tl/Kontakt.htm|';
Link[4] = '1|Über Mich|http://freestyler-mirko.de.tl/-Ue-ber-mich.htm|';
Link[5] = '0|Videos';
Link[6] = '1|Kettcar|http://freestyler-mirko.de.tl/Kettcar.htm';
Link[7] = '1|Playmobilschrotting|http://freestyler-mirko.de.tl/Playmobilschrotting.htm'
Link[8] = '1|Schule-Zu viel Zeit|http://freestyler-mirko.de.tl/Schule-_-Zu-viel-Zeit.htm'
Link[9] = '0|Bilder';
Link[10] = '1|FUN|http://freestyler-mirko.de.tl/FUN.htm;
Link[11] = '1|Kettcarspähning|http://freestyler-mirko.de.tl/Kettcarsp.ae.hning.htm';
Link[12] = '1|Äktschnmän|http://freestyler-mirko.de.tl/-Ae-ktschnm.ae.n.htm';
Link[13] = '1|Freizeit|http://freestyler-mirko.de.tl/Freizeit.htm';
Link[14] = '0|Lustiges';
Link[15] = '1|Neuigkeiten|http://freestyler-mirko.de.tl/Neuigkeiten.htm';
Link[16] = '1|Computerbau|http://freestyler-mirko.de.tl/Computerbau.htm';
Link[17] = '1|Bier Unser|http://freestyler-mirko.de.tl/Bier-Unser.htm';
Link[18] = '1|Worms|http://freestyler-mirko.de.tl/Worms.htm';
Link[19] = '0|Anderes';
Link[20] = '1|Tuning-Ecke|http://freestyler-mirko.de.tl/Tuning_Ecke.htm';
Link[21] = '1|PC-Ecke|http://freestyler-mirko.de.tl/PC_Ecke.htm';
Link[22] = '1|Bannertausch|http://freestyler-mirko.de.tl/Bannertausch.htm';
Link[23] = '1|Links|http://freestyler-mirko.de.tl/Links.htm';
Link[24] = '1|Umfragen|http://freestyler-mirko.de.tl/Umfragen--f---ar---f---ar---f---ar-.htm';
Link[25] = '1|Kostenlose HP|http://www.homepage-baukasten.de/';
Link[26] = '1|HPBK-Forum|http://www.homepage-baukasten.de/forum/';
Link[27] = '0|Webmaster';
Link[28] = '1|Projekte|http://freestyler-mirko.de.tl/Projekte.htm';
Link[29] = '1|Parties|http://freestyler-mirko.de.tl/Parties.htm';
Link[30] = '1|Codes|http://freestyler-mirko.de.tl/Codes.htm';
Link[31] = '1|Forum|http://freestyler-mirko.de.tl/Forum/index.htm';
Link[32] = '1|Test|http://freestyler-mirko.de.tl/Test.htm';
Link[33] = '0|Extras';
Link[34] = '1|Satellitenbild|http://freestyler-mirko.de.tl/Satellitenbild.htm';
Link[35] = '1|News|http://freestyler-mirko.de.tl/News.htm';
Link[36] = '1|Newsletter|http://freestyler-mirko.de.tl/Newsletter.htm';
Link[37] = '1|Galerie|http://freestyler-mirko.de.tl/Galerie/index.htm';
Link[38] = '0|Schule';
Link[39] = '1|Deutsch|http://freestyler-mirko.de.tl/Deutsch.htm';
Link[40] = '0|Noch was';
Link[41] = '1|Spiele|http://freestyler-mirko.de.tl/Spiele.htm';
Link[42] = '1|Impressum|http://freestyler-mirko.de.tl/Impressum.htm';
var height = 20; // Hoehe der Menuekoepfe
var iheight = 15; // Hoehe der Menueelemente
var bgc = '#e9f0f8' // background color of the item
var over_bgc = '#fff';
var tc = '#000' // text color of the item
var over_tc = '#004891';
var speed = 0;
var timerID = 0;
var width = 152;
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="menu" '
+ '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="item_panel" '
+ 'style="top: '+ mn + 'px;">');
start = 0;
}
document.write('<a href="' + la[2] + '"'
+ ((la[3] != '') ? ' target="' + la[3] + '"' : '')
+ '><div id="d' + i + '" class="item" '
+ '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;
}
}
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
startup(1);
//-->
</script>
</body>
</html>
