template

Index :: Javascript :: Menü :: Pulldown-Menü (einfach) ( Demo)

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.

Index :: Javascript :: Menü


template