JavaScripts -> Menüs -> Vertikaler Menübalken mit Fade-Effekt
Dieses Script erstellt ein Menü ähnlich dem Popup Menu Bar, mit dem Unterschied, dass die einzelnen Untermenüs sanft eingeblendet werden.
Benutzung:
Direkt nach dem Öffnenden Body-Tag fügen Sie den Aufruf des Scriptes ein.
Der erste Parameter gibt die Anzahl der Spalten an. Danach folgen die Überschriften der Spalten.
Darauf folgt für jede Spalte die Anzahl der Einträge und für jeden Eintrag Titel und URL, zu der verlinkt werden soll.
Updates in Version 1.1:
~ 2 Versionen des Scriptes für horizontal / vertikal
~ Detaillierter konfigurierbar (Ausrichtung, Textstil)
~ Auch mit Frames zu verwenden
Kompatibilität getestet: 
Script-Code
<body>
<script type="text/javascript">
<!--
// = = ================================================================================ = =
// = = Fading Page Menu v1.1 vertikal (c) 2003 Triple-M / http://www.htmlarsenal.de = =
// = = ================================================================================ = =
// ----------------------------------------------------------------------------------------
// -- Dieses Script und viele andere im --
// -- This script and many more in the --
// ----------------------------------------------------------------------------------------
// -- HTML ARSENAL - Die Quelle für HTML, JavaScript, PHP --
// -- HTML ARSENAL - Your Source for HTML, JavaScript, PHP --
// ----------------------------------------------------------------------------------------
// -- -= http://www.htmlarsenal.de =- --
// ----------------------------------------------------------------------------------------
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// + U P D A T E S I N V E R S I O N 1 . 1 +
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// + ~ 2 Versionen des Scriptes für horizontal / vertikal +
// + ~ Detaillierter konfigurierbar (Ausrichtung, Textstil) +
// + ~ Auch mit Frames zu verwenden +
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// + ~ 2 versions of the script for horizontal / vertikal +
// + ~ Configurable more detailedly (Alignment, text style) +
// + ~ Usable with frames +
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// Sie dürfen dieses Script für nicht-kommerzielle Zwecke nutzen, wenn diese Urheber-Notiz erhalten bleibt.
// You may use this Script for non-commercial causes as long as you include this copyright notice.
// Benutzung:
// ==========
// Direkt nach dem Öffnenden Body-Tag fügen Sie den Aufruf des Scriptes ein.
// Der erste Parameter gibt die Anzahl der Spalten an. Danach folgen die Überschriften der Spalten.
// Darauf folgt für jede Spalte die Anzahl der Einträge und für jeden Eintrag Titel und URL, zu der verlinkt werden soll.
// z.B.: createmenu(2,"1.Spalte","2.Spalte",
// 3, "Seite A","seite1.html", "Seite B","seite2.html", "Seite C", "seite3.html",
// 2, "HTML Arsenal","http://www.htmlarsenal.de", "Über Triple-M","http://www.htmlarsenal.de/user/?user=triple-m"
// );
// erstellt ein solches Menü:
// +-----------+---------------+
// | 1. Spalte | 2. Spalte |
// +-----------+---------------+
// | Seite A | HTML Arsenal |
// | Seite B | Über Triple-M |
// | Seite C | |
// +-----------+---------------+
// Usage:
// ======
// Include the script call directly after the opening body tag.
// The first parameter sets the number of columns. The next parameters set the column heads.
// The following parameters give the number of entries for each column and for each entry title and URL to be linked to.
// e.g.: createmenu(2,"1st Column","2nd Column",
// 3, "Page A","page1.html", "Page B","page2.html", "Page C", "page3.html",
// 2, "HTML Arsenal","http://www.htmlarsenal.de", "About Triple-M","http://www.htmlarsenal.de/user/?user=triple-m"
// );
// creates a menu looking like this:
// +------------+----------------+
// | 1st Column | 2nd Column |
// +------------+----------------+
// | Page A | HTML Arsenal |
// | Page B | About Triple-M |
// | Page C | |
// +------------+----------------+
// Veränderbare Einstellungen / Adjustable Settings
// ================================================
var col_background_r=0xff; // \
var col_background_g=0xff; // |-- Seiten-Hintergrund-Farbe (Hier: #ffffff) / page background color (here: #ffffff)
var col_background_b=0xff; // /
var col_border_r=0xc0; // \
var col_border_g=0x20; // |-- Rahmenfarbe (Hier: #c02020) / border color (here: #c02020)
var col_border_b=0x20; // /
var col_text_r=0x00; // \
var col_text_g=0x00; // |-- Textfarbe (Hier: #000000) / text color (here: #000000);
var col_text_b=0x00; // /
var col_menu_r=0xe0; // \
var col_menu_g=0xe0; // |-- Menü-Farbe (Hier: #e0e0e0) / menu color (here: #e0e0e0);
var col_menu_b=0xe0; // /
var delay=50; // Geschwindigkeit des Effektes (Höherer Wert=Langsamer) / effect speed (higher value=slower)
var steps=16; // Weichheit des Effektes (Höherer Wert=Weicher+Länger) / effect smoothness (higher value=smoother+longer)
var space=2; // Abstand der Menüzellen / space between menu cells
var font="Verdana,sans-serif"; // Schritfart / Font
var width="200px" // Breite des Menüs / width of the menu
var menu_underline=false; // Links unterstreichen? (ja->true, nein->false) / Underline links? (yes->true, no->false)
var menu_bold=false; // Links fett? (ja->true, nein->false) / Bold links? (yes->true, no->false)
var menu_align="center"; // Ausrichtung im Menü (left,center,right,justify) / Alignment in the menu (left,center,right,justify)
var menu_size="12px"; // Schriftgröße im Menü / Font size in the menu
var head_align="center"; // Ausrichtung im Menükopf (left,center,right,justify) / Alignment in the menu head (left,center,right,justify)
var head_bold=true; // Fette Schrift im Menükopf? (ja->true, nein->false) / Bold font in the menu head? (yes->true, no->false)
var head_underline=false;// Menüköpfe unterstreichen? (ja->true, nein->false) / Underline menu heads? (yes->true, no->false)
var head_size="14px"; // Schriftgröße im Menülopf / Font size in the menu head
var target_frame=""; // Zielframe. Aktueller Frame -> "", Andererer Frame -> "parent.framename." oder "top.framename."
// Wichtig: Den Punkt am Ende mitschreiben!
// Target frame. Current frame -> "", other frame -> "parent.framename." or "top.framename."
// Important: Don't forget to include the dot in the end
// Script-Code
// ===========
// Ab hier bitte nichts mehr verändern
// Please do not change anything from here on
var fpos=new Array();
var dir=new Array();
var to=new Array();
function rgb2h(R,G,B) {
RGB="#";
if(R<16)RGB+="0";
RGB+=R.toString(16);
if(G<16)RGB+="0";
RGB+=G.toString(16);
if(B<16)RGB+="0";
RGB+=B.toString(16);
return RGB;
}
function fade(show) {
if(to[show]) {
window.clearTimeout(to[show]);
to[show]=0;
}
fpos[show]+=dir[show];
if(fpos[show]>steps)fpos[show]=steps;
if(fpos[show]<0)fpos[show]=0;
document.getElementById(show).style.backgroundColor= rgb2h(
Math.floor(col_background_r + (fpos[show] * (col_menu_r - col_background_r)) / steps),
Math.floor(col_background_g + (fpos[show] * (col_menu_g - col_background_g)) / steps),
Math.floor(col_background_b + (fpos[show] * (col_menu_b - col_background_b)) / steps)
);
document.getElementById(show).style.color= rgb2h(
Math.floor(col_background_r + (fpos[show] * (col_text_r - col_background_r)) / steps),
Math.floor(col_background_g + (fpos[show] * (col_text_g - col_background_g)) / steps),
Math.floor(col_background_b + (fpos[show] * (col_text_b - col_background_b)) / steps)
);
document.getElementById(show).style.borderColor= rgb2h(
Math.floor(col_background_r + (fpos[show] * (col_border_r - col_background_r)) / steps),
Math.floor(col_background_g + (fpos[show] * (col_border_g - col_background_g)) / steps),
Math.floor(col_background_b + (fpos[show] * (col_border_b - col_background_b)) / steps)
);
if(fpos[show]>0)document.getElementById(show).style.cursor="pointer";
else document.getElementById(show).style.cursor="default";
if((fpos[show]>0) && (fpos[show]<steps)) to[show]=window.setTimeout("fade('"+show+"')",delay);
else dir[show]=0;
}
function fin(show) {
dir[show]=1;
if(isNaN(fpos[show])) {
fpos[show]=0;
to[show]=0;
}
fade(show);
}
function fout(show) {
dir[show]=-1;
if(isNaN(fpos[show])) {
fpos[show]=steps;
to[show]=0;
}
fade(show);
}
function menu(show) {
if(isNaN(fpos[show])) {
fpos[show]=0;
to[show]=0;
}
if(fpos[show]>0) {
dir[show]=1;
fade(show);
}
}
function createmenu() {
if(createmenu.arguments.length==0) alert("Falscher Aufruf des Menüs!");
var i;
document.write('<style type="text/css"> td.head { font-family:'+font+'; font-size:'+head_size+'; text-align:'+head_align+'; border:1px solid '+rgb2h(col_border_r,col_border_g,col_border_b)+'; background-color:'+rgb2h(col_menu_r,col_menu_g,col_menu_b)+'; color:'+rgb2h(col_text_r,col_text_g,col_text_b)+'; text-decoration:'+((head_underline)?"underline":"none")+'; font-weight:'+((head_bold)?"bold":"normal")+'; }');
rgbb=rgb2h(col_background_r,col_background_g,col_background_b);
document.write('td.menu { font-family:'+font+'; font-size:'+menu_size+'; text-align:'+menu_align+'; border:1px solid '+rgbb+'; background-color:'+rgbb+'; color:'+rgbb+'; text-decoration:'+((menu_underline)?"underline":"none")+'; font-weight:'+((menu_bold)?"bold":"normal")+'; } </style>');
document.write('<table style="border-collapse:separate; border-spacing:'+space+'px; width:'+width+'; table-layout:fixed">');
var tlnum=parseInt(createmenu.arguments[0]);
document.write('<tr>');
var off=0;
for(i=0;i<tlnum;i++) {
document.write('<tr>');
document.write('<td onMouseOver="fin(\'menu'+i+'\')" onMouseOut="fout(\'menu'+i+'\')" class="head">'+createmenu.arguments[i+1]+'<\/td>');
document.write('<td onMouseOver="menu(\'menu'+i+'\')" onMouseOut="fout(\'menu'+i+'\')" class="menu" id="menu'+i+'"');
num=parseInt(createmenu.arguments[1+tlnum+off]);
for(j=0;j<num;j++) {
document.write('<span class="link" onClick="javascript:'+target_frame+'location.href=\''+createmenu.arguments[3+tlnum+off+j*2]+'\'" title="'+createmenu.arguments[2+tlnum+off+j*2]+' ('+createmenu.arguments[3+tlnum+off+j*2]+')">'+createmenu.arguments[2+tlnum+off+j*2]+'<\/span><br />');
}
off+=num*2+1;
document.write('<\/td><\/tr>');
}
document.write('<\/table>');
}
// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Fading Page Menu --
// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 17.Feb.2004 --
// ----------------------------
//-->
</script>
<script type="text/javascript">
<!--
// = = ================================================================================ = =
// = = Fading Page Menu v1.1 vertikal (c) 2003 Triple-M / http://www.htmlarsenal.de = =
// = = ================================================================================ = =
// ----------------------------------------------------------------------------------------
// -- Dieses Script und viele andere im --
// -- This script and many more in the --
// ----------------------------------------------------------------------------------------
// -- HTML ARSENAL - Die Quelle für HTML, JavaScript, PHP --
// -- HTML ARSENAL - Your Source for HTML, JavaScript, PHP --
// ----------------------------------------------------------------------------------------
// -- -= http://www.htmlarsenal.de =- --
// ----------------------------------------------------------------------------------------
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// + U P D A T E S I N V E R S I O N 1 . 1 +
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// + ~ 2 Versionen des Scriptes für horizontal / vertikal +
// + ~ Detaillierter konfigurierbar (Ausrichtung, Textstil) +
// + ~ Auch mit Frames zu verwenden +
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// + ~ 2 versions of the script for horizontal / vertikal +
// + ~ Configurable more detailedly (Alignment, text style) +
// + ~ Usable with frames +
// ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// Sie dürfen dieses Script für nicht-kommerzielle Zwecke nutzen, wenn diese Urheber-Notiz erhalten bleibt.
// You may use this Script for non-commercial causes as long as you include this copyright notice.
// Benutzung:
// ==========
// Direkt nach dem Öffnenden Body-Tag fügen Sie den Aufruf des Scriptes ein.
// Der erste Parameter gibt die Anzahl der Spalten an. Danach folgen die Überschriften der Spalten.
// Darauf folgt für jede Spalte die Anzahl der Einträge und für jeden Eintrag Titel und URL, zu der verlinkt werden soll.
// z.B.: createmenu(2,"1.Spalte","2.Spalte",
// 3, "Seite A","seite1.html", "Seite B","seite2.html", "Seite C", "seite3.html",
// 2, "HTML Arsenal","http://www.htmlarsenal.de", "Über Triple-M","http://www.htmlarsenal.de/user/?user=triple-m"
// );
// erstellt ein solches Menü:
// +-----------+---------------+
// | 1. Spalte | 2. Spalte |
// +-----------+---------------+
// | Seite A | HTML Arsenal |
// | Seite B | Über Triple-M |
// | Seite C | |
// +-----------+---------------+
// Usage:
// ======
// Include the script call directly after the opening body tag.
// The first parameter sets the number of columns. The next parameters set the column heads.
// The following parameters give the number of entries for each column and for each entry title and URL to be linked to.
// e.g.: createmenu(2,"1st Column","2nd Column",
// 3, "Page A","page1.html", "Page B","page2.html", "Page C", "page3.html",
// 2, "HTML Arsenal","http://www.htmlarsenal.de", "About Triple-M","http://www.htmlarsenal.de/user/?user=triple-m"
// );
// creates a menu looking like this:
// +------------+----------------+
// | 1st Column | 2nd Column |
// +------------+----------------+
// | Page A | HTML Arsenal |
// | Page B | About Triple-M |
// | Page C | |
// +------------+----------------+
// Veränderbare Einstellungen / Adjustable Settings
// ================================================
var col_background_r=0xff; // \
var col_background_g=0xff; // |-- Seiten-Hintergrund-Farbe (Hier: #ffffff) / page background color (here: #ffffff)
var col_background_b=0xff; // /
var col_border_r=0xc0; // \
var col_border_g=0x20; // |-- Rahmenfarbe (Hier: #c02020) / border color (here: #c02020)
var col_border_b=0x20; // /
var col_text_r=0x00; // \
var col_text_g=0x00; // |-- Textfarbe (Hier: #000000) / text color (here: #000000);
var col_text_b=0x00; // /
var col_menu_r=0xe0; // \
var col_menu_g=0xe0; // |-- Menü-Farbe (Hier: #e0e0e0) / menu color (here: #e0e0e0);
var col_menu_b=0xe0; // /
var delay=50; // Geschwindigkeit des Effektes (Höherer Wert=Langsamer) / effect speed (higher value=slower)
var steps=16; // Weichheit des Effektes (Höherer Wert=Weicher+Länger) / effect smoothness (higher value=smoother+longer)
var space=2; // Abstand der Menüzellen / space between menu cells
var font="Verdana,sans-serif"; // Schritfart / Font
var width="200px" // Breite des Menüs / width of the menu
var menu_underline=false; // Links unterstreichen? (ja->true, nein->false) / Underline links? (yes->true, no->false)
var menu_bold=false; // Links fett? (ja->true, nein->false) / Bold links? (yes->true, no->false)
var menu_align="center"; // Ausrichtung im Menü (left,center,right,justify) / Alignment in the menu (left,center,right,justify)
var menu_size="12px"; // Schriftgröße im Menü / Font size in the menu
var head_align="center"; // Ausrichtung im Menükopf (left,center,right,justify) / Alignment in the menu head (left,center,right,justify)
var head_bold=true; // Fette Schrift im Menükopf? (ja->true, nein->false) / Bold font in the menu head? (yes->true, no->false)
var head_underline=false;// Menüköpfe unterstreichen? (ja->true, nein->false) / Underline menu heads? (yes->true, no->false)
var head_size="14px"; // Schriftgröße im Menülopf / Font size in the menu head
var target_frame=""; // Zielframe. Aktueller Frame -> "", Andererer Frame -> "parent.framename." oder "top.framename."
// Wichtig: Den Punkt am Ende mitschreiben!
// Target frame. Current frame -> "", other frame -> "parent.framename." or "top.framename."
// Important: Don't forget to include the dot in the end
// Script-Code
// ===========
// Ab hier bitte nichts mehr verändern
// Please do not change anything from here on
var fpos=new Array();
var dir=new Array();
var to=new Array();
function rgb2h(R,G,B) {
RGB="#";
if(R<16)RGB+="0";
RGB+=R.toString(16);
if(G<16)RGB+="0";
RGB+=G.toString(16);
if(B<16)RGB+="0";
RGB+=B.toString(16);
return RGB;
}
function fade(show) {
if(to[show]) {
window.clearTimeout(to[show]);
to[show]=0;
}
fpos[show]+=dir[show];
if(fpos[show]>steps)fpos[show]=steps;
if(fpos[show]<0)fpos[show]=0;
document.getElementById(show).style.backgroundColor= rgb2h(
Math.floor(col_background_r + (fpos[show] * (col_menu_r - col_background_r)) / steps),
Math.floor(col_background_g + (fpos[show] * (col_menu_g - col_background_g)) / steps),
Math.floor(col_background_b + (fpos[show] * (col_menu_b - col_background_b)) / steps)
);
document.getElementById(show).style.color= rgb2h(
Math.floor(col_background_r + (fpos[show] * (col_text_r - col_background_r)) / steps),
Math.floor(col_background_g + (fpos[show] * (col_text_g - col_background_g)) / steps),
Math.floor(col_background_b + (fpos[show] * (col_text_b - col_background_b)) / steps)
);
document.getElementById(show).style.borderColor= rgb2h(
Math.floor(col_background_r + (fpos[show] * (col_border_r - col_background_r)) / steps),
Math.floor(col_background_g + (fpos[show] * (col_border_g - col_background_g)) / steps),
Math.floor(col_background_b + (fpos[show] * (col_border_b - col_background_b)) / steps)
);
if(fpos[show]>0)document.getElementById(show).style.cursor="pointer";
else document.getElementById(show).style.cursor="default";
if((fpos[show]>0) && (fpos[show]<steps)) to[show]=window.setTimeout("fade('"+show+"')",delay);
else dir[show]=0;
}
function fin(show) {
dir[show]=1;
if(isNaN(fpos[show])) {
fpos[show]=0;
to[show]=0;
}
fade(show);
}
function fout(show) {
dir[show]=-1;
if(isNaN(fpos[show])) {
fpos[show]=steps;
to[show]=0;
}
fade(show);
}
function menu(show) {
if(isNaN(fpos[show])) {
fpos[show]=0;
to[show]=0;
}
if(fpos[show]>0) {
dir[show]=1;
fade(show);
}
}
function createmenu() {
if(createmenu.arguments.length==0) alert("Falscher Aufruf des Menüs!");
var i;
document.write('<style type="text/css"> td.head { font-family:'+font+'; font-size:'+head_size+'; text-align:'+head_align+'; border:1px solid '+rgb2h(col_border_r,col_border_g,col_border_b)+'; background-color:'+rgb2h(col_menu_r,col_menu_g,col_menu_b)+'; color:'+rgb2h(col_text_r,col_text_g,col_text_b)+'; text-decoration:'+((head_underline)?"underline":"none")+'; font-weight:'+((head_bold)?"bold":"normal")+'; }');
rgbb=rgb2h(col_background_r,col_background_g,col_background_b);
document.write('td.menu { font-family:'+font+'; font-size:'+menu_size+'; text-align:'+menu_align+'; border:1px solid '+rgbb+'; background-color:'+rgbb+'; color:'+rgbb+'; text-decoration:'+((menu_underline)?"underline":"none")+'; font-weight:'+((menu_bold)?"bold":"normal")+'; } </style>');
document.write('<table style="border-collapse:separate; border-spacing:'+space+'px; width:'+width+'; table-layout:fixed">');
var tlnum=parseInt(createmenu.arguments[0]);
document.write('<tr>');
var off=0;
for(i=0;i<tlnum;i++) {
document.write('<tr>');
document.write('<td onMouseOver="fin(\'menu'+i+'\')" onMouseOut="fout(\'menu'+i+'\')" class="head">'+createmenu.arguments[i+1]+'<\/td>');
document.write('<td onMouseOver="menu(\'menu'+i+'\')" onMouseOut="fout(\'menu'+i+'\')" class="menu" id="menu'+i+'"');
num=parseInt(createmenu.arguments[1+tlnum+off]);
for(j=0;j<num;j++) {
document.write('<span class="link" onClick="javascript:'+target_frame+'location.href=\''+createmenu.arguments[3+tlnum+off+j*2]+'\'" title="'+createmenu.arguments[2+tlnum+off+j*2]+' ('+createmenu.arguments[3+tlnum+off+j*2]+')">'+createmenu.arguments[2+tlnum+off+j*2]+'<\/span><br />');
}
off+=num*2+1;
document.write('<\/td><\/tr>');
}
document.write('<\/table>');
}
// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Fading Page Menu --
// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 17.Feb.2004 --
// ----------------------------
//-->
</script>