template
Das Slidedown-Menü ist eine animierte Variante des Pulldown-Menüs: statt einer harten Einblendung werden Untermenüboxen mittels Timer-Animation weich heruntergezogen und wieder eingefahren.
Falls der Benutzer die Maus quer über das Menü bewegt, kann es vorkommen, dass zwei oder mehr Untermenüboxen gleichzeitig sichtbar sind: die aktuelle Box wird gerade herausgefahren, während andere verschwinden. Um die sich dabei überlappenden Boxen optisch unterscheidbar zu machen, könnte man ihnen (wie im vorliegenden Beispiel, Demo 1) verschiedene Hintergrundfarben geben.
Eine andere Möglichkeit wäre die Verwendung eines Rahmens wie im Pulldown-Menü. Allerdings sollte man dann an der Oberseite der Box keinen Rahmen setzen, damit der grafische Zusammenhang zwischen Hauptmenüpunkt und Untermenü gewahrt bleibt. Eventuell ist dabei auch ein senkrechter Rahmen-Strich vor jedem Hauptmenüpunkt sinnvoll, um die vertikale Einheit von Hauptmenüpunkt und Untermenü zu verstärken (siehe Demo 2).
Im HTML-Code besteht ein Untermenü aus einer Tabelle, die in einen DIV eingebettet ist. Dieser DIV dient als zunächst unsichtbarer Container, dessen Overflow-Eigenschaft auf hidden gesetzt ist (dies ist notwendig, um das Untermenü nach oben hin verschwinden zu lassen).
Per Javascript wird (durch die Funktion InitMnu) jeder Untermenü-DIV erfasst. Ausserdem wird jeweils eine Struktur zur Aufnahme verschiedener Informationen reserviert.
C = style-Eigenschaft des DIV-Containers
O = Objekt Untermenü-Tabelle
H = Höhe der Untermenü-Tabelle
T = top-Eigenschaft der Untermenü-Tabelle
A = Aktion/Status des Untermenüs (0=geschlossen, 1=Animation:öffnen, 2=offen, 3=Animation:schließen)
Sobald die Maus Menüelemente überstreicht oder verlässt, wird die Aktions/Status-Variable entsprechend gesetzt und die Timer-Routine DoMnu() gestartet (sofern sie nicht schon läuft).
Globale Werte bzgl. der Animation sind:
MnuStep = Anzahl Pixel pro Bewegungsschritt
MnuMs = Anzahl Millisekunden für Timerintervall
Beim Anklicken eines Menüpunktes wird die Funktion ItmCli() aufgerufen. Anhand der Parameter m (Menü-Nr.) und i (Item-Nr.) kann dann mittels switch eine entsprechende Aktion durchgeführt werden; beispielsweise das Laden einer anderen Seite mittels self.location.href='blabla.html'.
Da das Menü wahrscheinlich auf einer ganzen Reihe von Dokumenten erscheinen muss, ist es empfehlenswert, für die Ausgabe der Menüelemente eine Javascript-Funktion zu benutzen, die alle Tabellen und DIVs per write() in den Body schreibt.
CSS im Header
TD.mnu { PADDING:2 10; }
TR.mnu0 { CURSOR:pointer;COLOR:#000000; }
TR.mnu1 { CURSOR:pointer;COLOR:#0000FF; }
Javascript im Header
function $(id) { return document.getElementById(id); }
var Mnu=[],Mnus=0,MnuStep=4,MnuTmr=null,MnuMs=50;
function InitMnu() { var o; while (o=$('sub'+Mnus)) {
Mnu[Mnus++]={C:o.style,O:o.firstChild,H:0,T:0,A:0}; }}
function DoMnu() { var i,m,b; MnuTmr=null;
for (i=b=0;i<Mnus;i++) switch ((m=Mnu[i]).A) {
case 1: b=1; if (!(m.O.style.top=(m.T=Math.min(m.T+MnuStep,0)))) m.A=2; break;
case 3: b=1; if ((m.O.style.top=(m.T=Math.max(m.T-MnuStep,-m.H)))==-m.H) { m.A=0; m.C.display='none'; }}
if (b) MnuTmr=window.setTimeout('DoMnu()',MnuMs); }
function MnuOv(o,id) { var i,m;
for (i=0;i<Mnus;i++) { m=Mnu[i];
if (i==id) switch (m.A) {
case 0: if (o) { m.C.display='';
m.O.style.top=m.T=-(m.H=m.O.offsetHeight);
m.C.left=o.parentNode.parentNode.parentNode.offsetLeft+o.offsetLeft;
m.C.top=o.parentNode.parentNode.parentNode.offsetTop+o.offsetTop+o.offsetHeight;
m.C.width=m.O.offsetWidth; m.C.height=m.H; }
case 3: m.A=1;
} else if (m.A) m.A=3;
} if (!MnuTmr) MnuTmr=window.setTimeout('DoMnu()',MnuMs); }
function MnuEx(id) { var m=Mnu[id];
if (m.A==2) { m.A=3; if (!MnuTmr) MnuTmr=window.setTimeout('DoMnu()',MnuMs); }}
function MnuOff() { var i,m,b;
for (i=b=0;i<Mnus;i++) { m=Mnu[i]; if (m.A) { b=1; m.A=3; }}
if (b&&!MnuTmr) MnuTmr=window.setTimeout('DoMnu()',MnuMs); }
function ItmOv(o) { o.className='mnu1'; }
function ItmEx(o) { o.className='mnu0'; }
function ItmCli(m,i) {
//hier: Aktion für Menü m, Item i durchführen...
}
document.onclick=MnuOff;
Weiter unten, im BODY, die Menüzeile ...
<table cellspacing='0' cellpadding='2'><tr style='CURSOR:default'>
<td class='mnu' bgcolor='#FFD0D0' onMousemove='MnuOv(this,0)' onMouseout='MnuEx(0)'>Menu1</td>
<td class='mnu' bgcolor='#FFFFD0' onMousemove='MnuOv(this,1)' onMouseout='MnuEx(1)'>Menu2</td>
<td class='mnu' bgcolor='#D0FFD0' onMousemove='MnuOv(this,2)' onMouseout='MnuEx(2)'>Menu3</td>
<td class='mnu' bgcolor='#D0FFFF' onMousemove='MnuOv(this,3)' onMouseout='MnuEx(3)'>Menu4</td>
<td class='mnu' bgcolor='#D0D0FF' onMousemove='MnuOv(this,4)' onMouseout='MnuEx(4)'>Menu5</td>
<td class='mnu' bgcolor='#FFD0FF' onMousemove='MnuOv(this,5)' onMouseout='MnuEx(5)'>Menu6</td>
</tr></table>
... und gleich dahinter: die Untermenüs
hier z.B. zwei Stück:
<div id='sub0' style='DISPLAY:none;POSITION:absolute;OVERFLOW:hidden;'><table
bgcolor='#FFD0D0' cellspacing='0' cellpadding='2' style='POSITION:relative;TOP:0;'
onMousemove='MnuOv(0,0)' onMouseout='MnuEx(0)'><tr class='mnu0'
onMousemove='ItmOv(this)' onMouseout='ItmEx(this)' onClick='ItmCli(1,1)'>
<td class='mnu'>Menu1.Item1</td>
</tr><tr class='mnu0' onMousemove='ItmOv(this)' onMouseout='ItmEx(this)' onClick='ItmCli(1,2)'>
<td class='mnu'>Menu1.Item2</td>
</tr><tr class='mnu0' onMousemove='ItmOv(this)' onMouseout='ItmEx(this)' onClick='ItmCli(1,3)'>
<td class='mnu'>Menu1.Item3</td>
</tr></table></div>
<div id='sub1' style='DISPLAY:none;POSITION:absolute;OVERFLOW:hidden;'><table
bgcolor='#FFFFD0' cellspacing='0' cellpadding='2' style='POSITION:relative;TOP:0;'
onMousemove='MnuOv(0,1)' onMouseout='MnuEx(1)'><tr class='mnu0'
onMousemove='ItmOv(this)' onMouseout='ItmEx(this)' onClick='ItmCli(2,1)'>
<td class='mnu'>Menu2.Item1</td>
</tr><tr class='mnu0' onMousemove='ItmOv(this)' onMouseout='ItmEx(this)' onClick='ItmCli(2,2)'>
<td class='mnu'>Menu2.Item2</td>
</tr><tr class='mnu0' onMousemove='ItmOv(this)' onMouseout='ItmEx(this)' onClick='ItmCli(2,3)'>
<td class='mnu'>Menu2.Item3</td>
</tr><tr class='mnu0' onMousemove='ItmOv(this)' onMouseout='ItmEx(this)' onClick='ItmCli(2,4)'>
<td class='mnu'>Menu2.Item4</td>
</tr></table></div>
... hier folgen evtl. noch weitere Untermenüs ...
Abschließend ein Javascript-Block zur Initialisierung:
<SCRIPT type='text/javascript'>InitMnu();</SCRIPT>
... hier steht der eigentliche HTML-Seiteninhalt ...
| template |
 |
Demo 1, Demo 2)