In Teil 1 des Artikels ging es darum, ein schnelles POPMenü zu erstellen. Das heisst: es darf nur wenig Speicherplatz benötigen, und muss einfach zu modifizieren sein.
Dieses Menü ist leider aber auch natürlich nicht Netscape-fähig. Ca. 8 % der Internet-User kommen über Netscape, Opera und andere. Ein weiteres Problem ist, dass manche User Javascript deaktiviert haben!
Die Lösung für die 8 %
Eine schnelle und einfache Lösung, um die 8 % und die User mit deaktiviertem Javascript trotz alledem zu versorgen, ist das Thema des heutigen Artikels.
Die Idee:
Zwei Menü´s(Tabellen) erstellen. Eines für IE und ein stark abgespecktes Menü für Netscape und alle anderen.
Wichtig ist, dass das HTML-Menu eingeblendet ist, und das IE-Menü mit Javascript den Attribut "STYLE= DISPLAY: none;" ausgeblendet wird.
Code:
das kleine Standard-Menü mit reinem HTML ohne Javascript-Funktionen.
<table valign="TOP" cellpadding=0 cellspacing=0 class="menu" id="idNS">
<tr>
<td valign="TOP" width="50" align="center" class="mnuHead">
<a href="/index.html"> Home</a>
</td>
<td valign="TOP" width=130 align="center" class="mnuHead">
<a href="/software/"> Software Produkte</a>
</td>
<td valign="TOP" width=130 align="center" class="mnuHead">
<a href="/support/"> Service & Support</a>
</td>
<td valign="TOP" width=100 align="center" class="mnuHead">
<a href="/schulung/"> Schulung</a>
</td>
<td valign="TOP" width=90 align="center" class="mnuHead">
<a href="/consulting/"> Consulting</a>
</td>
<td valign="TOP" width=80 align="center" class="mnuHead">
<a href=""> Über uns</a>
</td>
<td valign="TOP" width="60" align="center" class="mnuHead">
<a href="/formulare/kontakt.htm/"> Kontakt</a>
</td>
</tr>
</table> |
das IE-Menü mit samtlicher Funktionalität.
<table valign="TOP" cellpadding=0 cellspacing=0 class="menu" id="idIE" style="display: none;">
<tr>
<td valign="TOP" width="50">
<table cellspacing=0 cellpadding=0 width="100%"><tr>
<td onclick="l('/index.html');" align="center" class="mnuHead"> Home</td>
</tr></table>
<div id=mnu>
</div>
</td>
<td onmouseover="javascript:sichtbar(1);" onmouseout="unsichtbar(1)" 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>
.......
.......
....... |
Alles was wir jetzt noch brauchen, ist ein kleines Javascript, dass bei vorhandenem IE mit aktiviertem Javascript das IE-Menü einblendet und das andere ausblendet.
<SCRIPT LANGUAGE="javascript">
<!--
// Menu für Internet-Explorer anzeigen
var sNavi = navigator.appName;
if( sNavi.indexOf("Microsoft Internet") >-1 )
{ document.all["idIE"].style.display="inline";
document.all["idNS"].style.display="none"; }
//-->
</SCRIPT> |
Abschliessend:Jetzt werden alle User abgedeckt. Die IE-User kommen in den Genuss des Menü und die restlichen 8% haben die Möglichkeit, durch das kleine Standard-Menü zu "brausen".
Links:
POPMenu Teil 1 unter...
http://www.devtrain.de/news.asp?artnr=643