Ok Bevor ich Anfange hier erst mal das was dabei heraus kommen soll:
Das Prinzip:
Wir möchten das sich beim überfahren einer bestimmten Stelle mit der Maus ein zweites menü aufklappt.
Der einfachste Weg dies zu realisieren ist nicht das menü erst zu erstellen wenn man über diese Stelle fährt,
sonder ein bereits vorhandenes menü einfach sichtbar zu machen ;-)
Los gehts
Also was benötigen wir zuerst? Richtig, ein Menü. Das könnte ja ungefär so aussehen:
<table width="100" border=1>
<tr>
<td>
<a href="#">blub1</a>
</td>
</tr>
</table>
Jetzt brauchen wir natürlich noch das Menü das aufpopt sobald wir mit der Maus über "blub1" kommen:
<table border=1 rules=all>
<tr><td><a href="kalle1.html" >Eintrag1</a></td></tr>
<tr><td><a href="kalle2.html" >Eintrag2</a></td></tr>
<tr><td><a href="kalle3.html" >Eintrag3</a></td></tr>
</table>
Na toll, bis jetzt sieht das ja echt sch... aus, deshalb spielen wir nun ein wenig mit unseren
html und css kenntnissen herum und positionieren unsere menüs ein bisschen geschickter:
<div id="Vaterallerdivs" style="position:absolute;top:50">
<table width="100" border=1 rules=all>
<tr>
<td>
<a href="#">blub1</a>
</td>
</tr>
</table>
<div id="menue" style="position:absolute;top:0;left:0;">
<table align="left" width="100" border=1>
<tr><td> </td></tr>
</table>
<table border=1 rules=all>
<tr><td><a href="kalle1.html" >Eintrag1</a></td></tr>
<tr><td><a href="kalle2.html" >Eintrag2</a></td></tr>
<tr><td><a href="kalle3.html" >Eintrag3</a></td></tr>
</table>
<div>
</div>
Erklährung:
Das div mit der id Vaterallerdivs wird benötig da sich nach ihm alle anderen von ihm eingeschlossene div-tags
ausrichten. Mit style="position:absolute;top:50" geben wir seine position an.
Das div mit der id menue umschließt den Teil des codes der später aufpoppen soll.
In diesem abschnitt ist noch eine weitere Tabelle hinzugekommen, wozu wir diese benötigen werden wir später noch sehen...
Damit wir das menü nicht sehen ändern wir jetzt diese Zeile:
<div id="menue" style="position:absolute;top:0;left:0;">
in
<div id="menue" style="position:absolute;top:0;left:0;visibility:hidden">
und nun kommt der Trick mit dem JavaScript:
<script language="JavaScript">
function pop(aktion,id){
document.getElementById(id).style.visibility=aktion;
}
</script>
Erklährung:
Mit "document.getElementById(id).style.visibility=aktion" können wir auf die attribut "style" des
mit in der Variable id gekennzeichneten Dokumentenelemt zugreifen, und es bearbeiten. Wir wollen die
Sichtbarkeit ändern und überschreiben deshalb seine Eigenschaft "visibility" mit dem in der Variable "aktion" übergbenen wert.
damit dies auch stattfindet ändern wir die zeilen:
<table width="100" border=1 rules=all>
<tr>
<td>
<a href="#">blub1</a>
</td>
</tr>
</table>
in
<table width="100" border=1 rules=all>
<tr>
<td>
<a href="#" onMouseOver="pop('visible','menue');">blub1</a>
</td>
</tr>
</table>
damit das menü beim verlassen des "blub1" links auch wieder verschwiendet fügen wir noch:
onMouseOut="pop('hidden','menue');"
An dieser Stelle wird jetzt wieder die zuvor erwähnte Tabelle wichtig, sie dient sozusagen als Brücke, bis man mit der
Maus auf das eigentliche menü fährt, wir nehmen jezt nähmlich genau die gleichen beiden änderung bei
unserm div mit der id "menue" vor:
<div id="menue" style="position:absolute;top:0;left:0;visibility:hidden"
onMouseOut="pop('hidden','menue');" onMouseOver="pop('visible','menue')";>
<table align="left" width="100" border=1>
<tr><td> </td></tr>
</table>
<table border=1 rules=all>
<tr><td><a href="kalle1.html" >Eintrag1</a></td></tr>
<tr><td><a href="kalle2.html" >Eintrag2</a></td></tr>
<tr><td><a href="kalle3.html" >Eintrag3</a></td></tr>
</table>
<div>
sodale fertig!
euer quellcode sollte jetzt so aussehen:
<script language="JavaScript">
function pop(aktion,id){
document.getElementById(id).style.visibility=aktion;
}
</script>
<div id="Vaterallerdivs" style="position:absolute;top:50">
<table width="100" border=1 rules=all>
<tr>
<td>
<a href="#" onMouseOut="pop('hidden','menue');" onMouseOver="pop('visible','menue')";>blub1</a>
</td>
</tr>
</table>
<div id="menue" style="position:absolute;top:0;left:0;visibility:hidden"
onMouseOut="pop('hidden','menue');" onMouseOver="pop('visible','menue')";>
<table align="left" width="100" border=1>
<tr><td> </td></tr>
</table>
<table border=1 rules=all>
<tr><td><a href="kalle1.html" >Eintrag1</a></td></tr>
<tr><td><a href="kalle2.html" >Eintrag2</a></td></tr>
<tr><td><a href="kalle3.html" >Eintrag3</a></td></tr>
</table>
<div>
</div>
So dieses menü lässt sich jetzt relativ einfach beliebig erweitern und immer tiefer verschachteln... viel Spass damit.
Anmerkung:
Bei einigen Surfen ist möglicherweise JavaScript abgeschaltet oder der Browser kann es einfach nicht...
deshalb ist es ratsam hier:
"<a href="#" onMouseOut="pop('hidden','menue');" onMouseOver="pop('visible','menue')";>blub1</a>"
das "#" durch eine echte html-Seite zu ersetzten die ihm die gleiche möglichkeit bietet wie das Menü.
Obwohl sich ihr auch wieder die Frage stellt kann des Surfers Browser CSS wenn er schon kein JavaScript kann, und sieht
die Seite dann nicht sowieso so vermumpft aus, dass er sofort wegläuft?
Meiner Meinung nach lautet die Antwort auf diese Frage "Ja", aber hat es jemand mit so einem Browser überhaubt
verdient die Wertvollen Inhalte unserer Website zu betrachten ? ... ;-)
tob