template
Das horizontale Menü besitzt eine Reihe von Menüpunkten.
Jeder dieser Punkte kann ein Untermenü besitzen, welches automatisch eingeblendet wird.
Der verwendete Javascript-Code im Header benötigt dazu eine Arraystruktur, in der Titel und Verweisziele definiert sind (im Sourcecode blau gekennzeichnet).
Ein Menüpunkt mit Untermenü hat folgende Struktur:
[ Menütitel,
[ Untermenütitel, Verweisziel ],
[ Untermenütitel, Verweisziel ],
[ Untermenütitel, Verweisziel ]
]
Ein Menüpunkt ohne Untermenü hat folgende Struktur:
[ Menütitel, Verweisziel ]
Durch das Anklicken eines relevanten Menüpunktes wird die Funktion MnuCl() aufgerufen. In ihren Parametern nr und itm werden dabei die Nummer [1...N] des Menüs und die Nummer [1...N] des Untermenüpunktes übermittelt. Hier könnte man per switch-Block detaillierte Aktionen durchführen. Im vorliegenden Beispiel wird jedoch nur eine (gemäß Struktur vorgegebene) Zieladresse geladen.
CSS im Header
TABLE.mnu { BACKGROUND:#E0E0E0; }
TD.mnu { PADDING:2 10 2 10; FONT:12px verdana,arial,helvetica,sans-serif;
COLOR:#000080; CURSOR:pointer; }
DIV.mnu { POSITION:absolute; BACKGROUND:#E0E0E0; BORDER:1px solid #000080; }
Javascript im Header
var MnuHiLite=['#A0A0A0','#FFFFFF']; //Bg/Txt-Farbe f. aktiv
var MnuLoLite=['#E0E0E0','#000080']; //Bg/Txt-Farbe f. normal
var aMenu=[
['Menu1',
['Menu1.Item1','page1.html'],['Menu1.Item2','page2.html'],['Menu1.Item3','page3.html']],
['Menu2',
['Menu2.Item1','page4.html'],['Menu2.Item2','page5.html'],['Menu2.Item3','page6.html']],
['Menu3','page7.html'],
['Menu4',
['Menu4.Item1','page8.html'],['Menu4.Item2','page9.html'],['Menu4.Item3','page10.html']]
],MnuActSub=null;
function $(id) { return document.getElementById(id); }
function $P(s) { document.write(s); }
function MnuSubOff() { if (MnuActSub) { MnuActSub.display='none'; MnuActSub=null; }}
function MnuOv(td,nr) {
if (nr!=undefined) { if (!nr) MnuSubOff(); else {
var sub=$('sub'+nr).style; if (sub==MnuActSub) return; MnuSubOff();
sub.left=td.parentNode.parentNode.parentNode.offsetLeft+td.offsetLeft;
sub.top=td.parentNode.parentNode.parentNode.offsetTop+td.offsetTop+td.offsetHeight;
(MnuActSub=sub).display=''; }
} td.style.backgroundColor=MnuHiLite[0]; td.style.color=MnuHiLite[1]; }
function MnuCl(nr,itm) { self.location.href=(itm==undefined?aMenu[nr-1][1]:aMenu[nr-1][itm][1]); }
function MnuEx(td) { td.style.backgroundColor=MnuLoLite[0]; td.style.color=MnuLoLite[1]; }
function MnuWrite() {
var i,j,n=aMenu.length,sm; $P("<table class='mnu' cellspacing='0'><tr>");
for (i=0;i<n;i++) { sm=aMenu[i][1].constructor==Array;
$P("<td class='mnu' onMouseover='MnuOv(this,"+(sm?i+1:0)+")' onMouseout='MnuEx(this)'");
if (!sm) $P(" onClick='MnuCl("+(i+1)+")'"); $P(">"+aMenu[i][0]+"</td>");
} $P("</tr></table>");
for (i=0;i<n;i++) if (aMenu[i][j=1].constructor==Array) {
$P("<div id='sub"+(i+1)+"' class='mnu' style='DISPLAY:none'><table cellspacing='2'>");
while (sm=aMenu[i][j]) {
$P("<tr><td class='mnu' onMouseover='MnuOv(this)' onMouseout='MnuEx(this)' onClick='MnuCl("+(i+1)+","+j+")'>");
$P(sm[0]+"</td></tr>"); j++;
} $P("</table></div>"); }}
document.onclick=MnuSubOff;
Im HTML-Code wird das Menü dann mittels MnuWrite() eingefügt:
Javascript-Block im BODY:
<SCRIPT type='text/javascript'>MnuWrite();</SCRIPT>
... hier steht der eigentliche HTML-Seiteninhalt ..
CSS und Javascript sollten in externe Module ausgelagert werden, damit das Menü zentral pflegbar ist und von jedem Unterdokument eingebunden werden kann.
template |
|