Cascade Menü - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

Cascade Menü

Scripte > Menü Navigation
Ein kleines Cascade (Automatik-) Menü
Ein Mini-Menü über JavaScript. Im Opera zeigt es einen weissen Balken unten, ist jedoch akzeptabel.
Das Menü ist leicht erweiterbar und kann auf die eigenen Bedürfnisse an die Homepage angepasst werden. Die Anpassungen erfolgen in der separaten Datei "cascade_menu.html" auf dem Webserver.
Leider funktioniert der Code nur in Einbindung als iframe <iframe>...</iframe>.
Somit lässt sich das Menü auch in mehreren Webseiten einbinden, wobei Änderungen dann nur in einer Datei ausgeführt werden müssen.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HTML-Code dann einfach nur in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Download Button
x runter geladen!
Code für den <BODY> Bereich
<iframe
name="Cascade" src="wsX5Obj/Obj12_0/cascade_menu.html" width="180" height="230" frameborder="0" scrolling="no">
</iframe>
Code Datei "cascade_menu.html"
<style type="text/css">
.Obj12a {
background-color: #2b6ebb;
border: 1px solid #008;
font-family: Verdana;
position: absolute;
font-weight: bold;
padding-top: 3px;
font-size: 11px;
cursor: pointer;
width: 150px;
color: #fff;
}
.Obj12b { border-left: 1px solid #008; border-right: 1px solid #008; clip: rect(0, 150, 0, 0);
position: absolute; width: 150px; }
.Obj12b a { text-decoration: none; cursor: pointer; color: #000; }
.Obj12c { background-color: #e9f0f8; font-family: Verdana; font-size: 10px; width: 148px; }
</style>

<script type="text/javascript">
var Link = new Array();
Link[0]  = '0|Hauptmen&uuml; 1';
Link[1]  = '1|Untermen&uuml; 1.1|http://www.|target="_parent"|';
Link[2]  = '1|Untermen&uuml; 1.2|http://www.|target="_blank"|';
Link[3]  = '1|Untermen&uuml; 1.3|http://www.|';
Link[4]  = '1|Untermen&uuml; 1.4|http://www.|';
Link[5]  = '0|Hauptmen&uuml; 2';
Link[6]  = '1|Untermen&uuml; 2.1|http://www.|';
Link[7]  = '1|Untermen&uuml; 2.2|http://www.|'
Link[8]  = '0|Hauptmen&uuml; 3';
Link[9]  = '1|Untermen&uuml; 3.1|http://www.|';
Link[10] = '1|Untermen&uuml; 3.2|http://www.|';
Link[11] = '0|Hauptmen&uuml; 4';
Link[12] = '1|Download Script|http://dl.home-wiekau.de/click.php?id=wsX5Obj12_0|target="_blank"|';
var height    = 20;        // Höhe der Menüeköpfe
var iheight   = 15;        // Höhe der Menüelemente
var bgc       = '#e9f0f8'  // Hintergrundfarbe Untermenü
var over_bgc  = '#fff';    // Hintergrundfarbe Untermenü überfahren
var tc        = '#000'     // Textfarbe Untermenü
var over_tc   = '#004891'; // Textfarbe Untermenü überfahren
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="Obj12a" '
+ '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="Obj12b" '
+ 'style="top: '+ mn + 'px;">');
start = 0;
}
document.write('<a href="' + la[2] + '"'
+ ((la[3] != '') ? ' target="' + la[3] + '"' : '')
+ '><div id="d' + i + '" class="Obj12c" '
+ '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>

<script type="text/javascript">
startup(1);
</script>
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 1 Online
» 133 Heute
» 182 Gestern
» 828 Woche
» 3148 Monat
» 126518 Jahr
» 454274 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt