POP-Menü´s sparen Platz am Bildschirm und sehen gut aus. Das sind zwei Gründe für solche Menü´s. Ausserdem ist es nicht schwierig so ein Menü selber zu machen. Das ganze ist mit relativ wenig Javascript und ein bischen CSS möglich.
1. Umsetzung des HTML-Parts
Wichtig ist hier das CSS, das die Visibility-Eigenschaft der DIV-Tags auf "hidden" setzt. So werden alle Elemente innerhalb der Tags unsichtbar. In den obersten Menü-Punkten werden über das onmouseover- und onmouseout-Event Javascript-Funktionen ausgelöst. Diese setzen die Visibility-Eigenschaft der DIV-Tags auf "visible" oder "hidden".
Das onclick-Event der einzelnen Menu-Items löst die "l"-Javascript-Funktion aus. Hier wird der Link, der zu der verlinkten Seite, führt übergeben.
<table width="100%" class="menu"><tr><td align="center">
<table valign="TOP" cellpadding=0 cellspacing=0 class="menu">
<tr>
<td onmouseover="javascript:sichtbar(0);" onmouseout="unsichtbar(0)" valign="TOP" width=130>
<table cellspacing=0 cellpadding=0 width="100%"><tr><td onclick="l('/software/');" align="center" class="mnuHead"> Software Produkte</td></tr></table>
<div id=mnu>
<table width="130" cellpadding=0 cellspacing=0>
<tr><td class="mi" onclick="l('/software/index.html');" style="BORDER-TOP: black 1px solid;"> Überblick</td></tr>
<tr><td class="mi" onclick="l('/haendler/index.html');"> Dealers Only</td></tr>
<tr><td class="mi" onclick="l('/webcam/index.htm');" style="BORDER-BOTTOM: black 1px solid;"> Webcam</td></t>
</table>
</div>
</td>
<td onmouseover="javascript:sichtbar(1);" onmouseout="unsichtbar(1)" valign="TOP" width=130>
<table cellspacing=0 cellpadding=0 width="100%"><tr><td class="mnuHead" onclick="l('/support/');" align="center"> Service & Support</td></tr></table>
<div id=mnu>
<table width="130" cellpadding=0 cellspacing=0>
<tr><td class="mi" onclick="l('/asp/index.htm');" style="BORDER-TOP: black 1px solid;"> ASP Know How</td></tr>
<tr><td class="mi" onclick="l('/asp/seitee.htm');"> aspmail</td></tr>
<tr><td class="mi" onclick="l('/webcam/index.htm');" style="BORDER-BOTTOM: black 1px solid;"> Webcam</td></t>
</table>
</div>
</td>
</tr>
</table>
</td></tr></table> |
2. Der Javascript-PartDie Document-Events "onmouseover" und "onmouseout" starten die Funktion ItemHandler. Diese verändert die Hintergrund-Farbe der einzelnen Menü-Items.
Über die Function sichtbar bzw. unsichtbar werden die Menü-Items ein-aus geblendet.
<SCRIPT LANGUAGE=javascript>
<!--
document.onmouseover=ItemHandler;
document.onmouseout=ItemHandler;
function ItemHandler() {
if(!document.all) return;
var sCls= event.srcElement.className;<BR> if(sCls=="mi"||sCls=="mnuHead")
{
switch (event.type) {
case "mouseover" : event.srcElement.style.background='#9b9dff';
break;
case "mouseout" : event.srcElement.style.background='#1855A5'; }
}
}
function sichtbar(i) {
document.all.mnu[i].style.visibility="visible"; }
function unsichtbar(i) {
document.all.mnu[i].style.visibility="hidden"; }
function l(a) { location.href=a }
//-->
</SCRIPT> |
Das ganze jetzt noch mit CSS schön gemacht und fertig.
Hier ist das komplette HTM-File mit CSS zu downloaden oder anschauen.