Quermania - HTML, Javascript, CSS, Webdesign - Aufbau eines Pulldown-Menüs - dynamische Menüs - dynamisches HTML - Computer

Der Aufbau dieser Menüs erfolgt in drei Schritten:

1. Cascading Stylesheets - Festlegen der Menüpositionen

2. Einrichten von Tabellen - für die Inhalte der Menüs

3. Javascript-Funktionen - Steuerung der Menüanzeige

Erklärung der Schritte im Menü "Anzeigen der Schritte"

Die im Internet verwendeten Menüs funktionieren oft bei einigen Browsertypen nicht. Das hier beschriebene Menü funktioniert auch bei alten Browsern:

ab Internet-Explorer 5.0

ab Netscape 6.1

ab Opera 5.02

Hier wird die daür benötigte Grundvariante beschrieben. Die weitere Ausgestaltung und
Verfeinerung ist natürlich problemlos möglich.

1. Cascading Stylesheets

Hier erfolgt die Positionierung der Menüs vom oberen (top:...;) und linken (left:...;) Fensterrand.
Weitere Style-Eigenschaften können hier nicht vergeben werden, da dies beim Opera-Browser zu Fehlern
führt. Der Z-Index sorgt für die Überlagerung der Menüs über die eigentliche Internetseite.

2. Tabellen

Innerhalb der <div>-Elemente befinden sich die Menüs in Tabellen angeordnet. Über "id=..." werden die <div>-Elemente von den Cascading Stylesheets positioniert. Im A-Tag befindet sich jeweils zusätzlich zum eigentlichen Link die Ereignisabfrage "OnMouseOver=...". Hier wird das entsprechende Ereignis (Cursor befindet sich über dem Menü) an die Javascript-Funktion übergeben. Über die "id=..." werden auch die entsprechenden Elemente/Menüs vom Javascript aus ansprechbar.

<div id="menubar">
<table border="1"><tr> <td>
<a href="#..." OnMouseOver="javascript:zeigemenus1()"> Menüteil 1 </a>
</td><td>
<a href="#..." OnMouseOver="javascript:zeigemenus2()"> Menüteil 2 </a>
</td></tr></table>
</div>

<div id="spalte1" style="visibility:hidden">
<table border="1"><tr><td>
<a href="../index.html" target="_blank">zur Homepage</a>
</td></tr></table>
</div>

<div id="spalte2" style="visibility:hidden">
<table border="1"><tr><td>
<a href="http://www.dag-erfurt.de" target="_blank">Deutsch- Amerikanische Gesellschaft Erfurt</a>
</td></tr></table>
</div>

3. Javascript-Funktionen

Hier erfolgt die Steuerung der Menüs (Anzeigen oder Nicht-Anzeigen). Mit der Funktion
"document.getElementById("spalte2").style.visibility=..." wird das in Klammern angesprochene Element
mit der Anweisung "hidden/visible" sichtbar bzw. unsichtbar. Wichtig ist hier noch die
Funktion "loeschen()". Dadurch werden alle Menü-Objekte zurückgesetzt.