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

Schrittweise Erklärung zur Erstellung von Pulldown-Menüs in HTML

Mit der eigenen Homepage kann auch viel Geld verdient werden.

Feiertage 2018 und 2019

Diese Seite auf Facebook teilen

3. Javascript-Funktionen

zurück zum Anfang

dieses Beispiel zeigen

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ü "Schritte zeigen"

Die hier vorgestellten Menüs basieren auf HTML-Tabellen. Dadurch funktionieren sie bei allen Browser- und Dokumenttypen. Sie sind somit unabhängig von der benutzten HTML-Version. Die Verwendung von anderen Blockelementen anstelle von Tabellen funktioniert grundsätzlich nach dem gleichen Prinzip.

Im Responsive Webdesign sollten diese Menüs außerdem auf dem Smartphone als untereinanderliegende Klappmenüs gestaltet werden. Das wird in diesem Beispiel nicht erklärt.

1. Cascading Stylesheets

Hier erfolgt die Positionierung der Menüs vom oberen (top:...;) und linken (left:...;) Fensterrand. Die Style-Eigenschaften werden am besten im Dateienkopf angeben, also innerhalb des <head>-Tags, oder als externe Datei verlinkt. 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">DAG 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 den Anweisungen "hidden" oder "visible" sichtbar bzw. unsichtbar. Wichtig ist hier noch die Funktion "loeschen()". Dadurch werden alle Menü-Objekte zurückgesetzt.

Auch das Javascript wird am besten innerhalb des <head>-Tags oder als externe Datei eingebunden.