JavaScripts -> Menüs -> Sliding Menu

Horizontales Menü, bei dem die einzelnen Untermenüs zuerst ausgeblendet sind und sich auf Klicken vergrößern.

Kompatibilität getestet:
Beispiel Anzeigen >>

Script-Code

<body>
<!--
// = = ================================================================================ = =
// = = Sliding Menu v1.0 (c) 2004 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 Menüköpfe an. Danach folgen die Überschriften der Untermenüs.
Darauf folgt für jede Spalte die Anzahl der Einträge, die Höhe des aufgefalteten Menüs und für jeden
Eintrag Titel und URL, zu der verlinkt werden soll.
z.B.: menu(2,"1.Menü","2.Menü",
           3,75, "Seite A","seite1.html", "Seite B","seite2.html", "Seite C", "seite3.html",
           2,40, "HTML Arsenal","http://www.htmlarsenal.de", "Über Triple-M","http://www.htmlarsenal.de/user/?user=triple-m"
          );
erstellt ein solches Menü:

 +---------------+
 | 1. Menü |
 +---------------+
 | Seite A |
 | Seite B |
 | Seite C |
 +---------------+
 +---------------+
 | 2. Menü |
 +---------------+
 | HTML Arsenal |
 | Über Triple-M |
 +---------------+

Usage:
======

Include the script call directly after the opening body tag.
The first parameter sets the number of menu heads. The next parameters set the menu heads.
The following parameters give the number of entries and the total height for each menu and for
each entry title and URL to be linked to.
e.g.: menu(2,"1st Menu","2nd Menu",
           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 Menu |
 +----------------+
 | Page A |
 | Page B |
 | Page C |
 +----------------+
 +----------------+
 | 2. Menü |
 +----------------+
 | HTML Arsenal |
 | About Triple-M |
 +----------------+
-->
<style type="text/css">
<!--
//veränderbares Stylesheet / Adjustable style sheet
//=================================================

  div.asmhead { // Menü-Kopf
    margin-left:10px;
    margin-top:5px;
    margin-bottom:0px;
    margin-right:0px;
    width:100px;
    vertical-align:center;
    text-align:center;
    height:20px;
    font-family:Verdana;
    font-size:14px;
    border:1px solid #c02020;
    background-color:#e0e0e0;
    color:#000000;
    font-weight:bold;
  }

  div.asmbody { // Menü-Körper
    margin-top:5px;
    margin-left:10px;
    margin-right:0px;
    margin-bottom:0px;
    width:100px;
    height:1px;
    overflow:hidden;
    border:1px solid #c02020;
    background-color:#ffffff;
    color:#000000;
    font-family:Verdana;
    font-size:12px;
    text-align:center;

  }

  a.asm { // Links
    color:#000000;
  }

-->
</style>
<script type="text/javascript">
<!--

// Script-Code
// ===========

// Ab hier bitte nichts mehr verändern
// Please do not change anything from here on

var to=0;

function foldout(mid,akt,height,current) {
  current+=5;
  document.getElementById(mid+'_b'+akt).style.height=current+"px";
  if(current<height)to=window.setTimeout('foldout("'+mid+'",'+akt+','+height+','+current+')',50);
  else to=0;
}

function asmtoggle(mid,akt,height,num_head) {
  var i;
  if(to)window.clearTimeout(to);
  if(parseInt(document.getElementById(mid+'_b'+akt).style.height)>1) {
    for(i=0;i<num_head;i++) document.getElementById(mid+'_b'+i).style.height="1px";
  } else {
    for(i=0;i<num_head;i++) document.getElementById(mid+'_b'+i).style.height="1px";
    foldout(mid,akt,height,0);
  }
}

function menu() {
  if(menu.arguments.length==0) alert("Falscher Aufruf des Menüs!");
  var mid="asm"+Math.floor(Math.random()*1000);
  var num_head=parseInt(menu.arguments[0]);
  var i,j;
  var akt=1;
  var head=new Array(num_head);
  var num,height;
  for(i=0;i<num_head;i++)head[i]=menu.arguments[akt++];
  for(i=0;i<num_head;i++) {
    num=menu.arguments[akt++];
    height=menu.arguments[akt++];
    document.writeln('<div class="asmhead" id="'+mid+'_h'+i+'" onClick="asmtoggle(\''+mid+'\','+i+','+height+','+num_head+')">');
    document.writeln(head[i]);
    document.writeln('<\/div>');
    document.writeln('<div class="asmbody" id="'+mid+'_b'+i+'">');
    for(j=0;j<num;j++) {
      document.writeln('<a class="asm" href="'+menu.arguments[akt+1]+'">'+menu.arguments[akt]+'<\/a><br />');
      akt+=2;
    }
    document.writeln('<\/div>');
  }
}
// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Sliding Menu --
// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 29.Feb.2004 --
// ----------------------------

//-->
</script>