JavaScripts -> Menüs -> Menübalken mit Fade-Effekt

<script type="text/javascript">
<!--
// = = ===================================================================== = =
// = = Fading Page Menu v1.0 (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 =- --
// -----------------------------------------------------------------------------


// 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=0xcc; // \
var col_background_g=0x99; // |-- Seiten-Hintergrund-Farbe (Hier: #cc9966) / page background color (here: #cc9966)
var col_background_b=0x66; // /

var col_border_r=0xff; // \
var col_border_g=0xcc; // |-- Rahmenfarbe (Hier: #ffcc66) / border color (here: #ffcc66)
var col_border_b=0x66; // /

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=0xff; // \
var col_menu_g=0xff; // |-- Menü-Farbe (Hier: #ffffff) / menu color (here: #ffffff);
var col_menu_b=0xff; // /

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

// 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 akt=0,i;
  document.write('<style type="text/css"> td.head { text-align:center; 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)+'; }');
  rgbb=rgb2h(col_background_r,col_background_g,col_background_b);
  document.write('td.menu { text-align:center; border:1px solid '+rgbb+'; background-color:'+rgbb+'; color:'+rgbb+'; text-decoration:underline; } </style>');
  document.write('<table style="border-collapse:separate; border-spacing:'+space+'px; width:100%; table-layout:fixed">');
  var tlnum=parseInt(createmenu.arguments[akt]);
  for(i=0;i<tlnum;i++)document.write('<col width="1*">');

  document.write('<tr>');

  for(i=0;i<tlnum;i++) {

    akt++;
    document.write('<td onMouseOver="fin(\'menu'+i+'\')" onMouseOut="fout(\'menu'+i+'\')" class="head">'+createmenu.arguments[akt]+'</td>');
  }
  document.write('</tr><tr>');
  for(i=0;i<tlnum;i++) {
    akt++;
    document.write('<td onMouseOver="menu(\'menu'+i+'\')" onMouseOut="fout(\'menu'+i+'\')" class="menu" id="menu'+i+'"');
    num=parseInt(createmenu.arguments[akt]);
    for(j=0;j<num;j++) {
      akt+=2;
      document.write('<span class="link" onClick="javascript:location.href=\''+createmenu.arguments[akt]+'\'" title="'+createmenu.arguments[akt-1]+' ('+createmenu.arguments[akt]+')">'+createmenu.arguments[akt-1]+'</span><br>');
    }
    document.write('</td>');
  }
  document.write('</tr></table>');
}

// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Fading Page Menu --
// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 02.Oct.2003 --
// ----------------------------

//-->
</script>