Hallo
Inhaltsverzeichnis:
1. Vorwort
- 1.1 Warum so ein Tutorial?
- 1.2 Übersichtlichkeit
- 1.3 Vorraussetzungen
- 1.4 Wofür so ein Menü?
2. Das Script
- 2.1 Das komplette Script
- 2.2 Erklärung (Zeile 1-5)
- 2.3 Erklärung (Zeile 6-9)
- Zusammenfassung
3. Der HTML-Teil
- 3.1 Der komplette Teil
- 3.2 Erklärung
4. Anhang
- 4.1 Das Pack
- 4.2 Nachwort
1. Vorwort
1.1 Warum so ein Tutorial?
Da im Forum viele User nach so einem Menü fragten, dachte ich mir dass ich dazu mal ein Tutorial schreibe. Da ich noch kein Profi - eher gesagt ein Anfänger - in JavaScript bin, könnte es zu unklarheiten kommen.
1.2 Übersichtlichkeit
Ich habe Versucht das Tutorial so übersichtlich wie möglich zu gestalten. Ich hoffe dies ist mir gelungen und ihr könnt mein Tutorial verstehen und umsetzten.
1.3 Vorraussetzungen
Ich denke mal, dass man eigentlich kaum JavaScript-Kenntnisse brauch, sondern eher HTML-Kenntnisse. Diese setze ich zwingend vorraus!
1.4 Wofür so ein Menü?
So ein Menü kann man sehr gut für Seiten gebrauchen, die große Menü's oder Funktionen haben. Es spart viel Platz da immer nur eine Kategorie angezeigt wird.
2. Das Script
2.1 Das komplette Script
Hier ist das JavaScript-Script:
<script type="text/javascript">
<!--
function show(divid) {
d=document;
d.getElementById("cat1").style.display="none";
d.getElementById(divid).style.display="inline";
}
function hide() {
d=document;
d.getElementById("cat1").style.display="none";
}
//-->
</script>
2.2 Erklärung (Zeile 1-5)
<script type="text/javascript"> Kein Kommentar
<!-- Kein Kommentar
function show(divid) { Wir erstellen die Funktion "show()"
d=document; Da wir wenig Zeit haben kürzen wir die Variable "document" in "d" ab
2.3 Erklärung (Zeile 6-9)
d.getElementById("cat1").style.display="none"; Der Kategorie-Inhalt wird nicht dargestellt
d.getElementById("cat2").style.display="none"; Dito
d.getElementById(divid).style.display="inline"; Der Kategorie-Inhalt wird dargestellt
} Funktion beenden
function hide() { Die Funktion "hide()" wird gestartet
d=document; Wir kürzen wieder ab...
d.getElementById("cat1").style.display="none"; <-|
d.getElementById("cat2").style.display="none"; (Doppel-Zeile) Die Kategorien werden ausgeblendet
} Funktion beenden
//--> Kein Kommentar
</script> Kein Kommentar
2.4 Zusammenfassung
Die Funktion "hide()" ist eigentlich nicht anders als die Funktion "show()", allerdings fehlt die Zeile wo eine Kategorie angezeigt werden kann;
d.getElementById(divid).style.display="inline";
3. Der HTML-Teil
3.1 Der komplette Teil
Hier ist der komplette HTML-Teil:
<a href="#" onclick="show('cat1')"><b>Kategorie1</b></a><br>
<div id="cat1" style="display:none">
<table cellpadding="0" cellspacing="0">
<tr><td><img src="001.png"></td><td><a href="#" target="textframe">Hund</a></td></tr>
<tr><td><img src="002.png"></td><td><a href="#" target="textframe">Katze</a></td></tr>
<tr><td><img src="003.png"></td><td><a href="#" target="textframe">Maus</a></td></tr>
</table>
</div>
<a href="#" onclick="show('cat2')"><b>Kategorie2</b></a><br>
<div id="cat2" style="display:none">
<table cellpadding="0" cellspacing="0">
<tr><td><img src="001.png"></td><td><a href="#" target="textframe">Hund</a></td></tr>
<tr><td><img src="002.png"></td><td><a href="#" target="textframe">Katze</a></td></tr>
<tr><td><img src="003.png"></td><td><a href="#" target="textframe">Maus</a></td></tr>
</table>
</div>
<br><br>
<b><a href="#" onclick="hide()">Menü schliessen</a></b>
3.2 Erklärung
Dieser Teil sollte sich eigentlich von selbst erklären, da ich (wie in Schritt 1.3 schon erwähnt hatte) HTML-Kenntnisse vorraussetze!
4. Anhang
4.1 Das Pack
Ich habe eine kleine Zip-Datei vorbereitet und hochgeladen. Darin ist das komplette Script drin. Ich empfehle euch die Datei "readme.txt" durchzulesen da dort drin noch eine Anleitung ist wie man das Pack in die eigene Homepage einbindet. Hier ist der Link zum Pack:
http://roddweiler1992.download.lima-city.de/dyn-aufklappmenue.zip
4.2 Nachwort
Ich hoffe euch hat mein Tutorial gefallen und auch geholfen. Bei Fragen könnt ihr mich gerne per PM (Personal Message) hier bei Lima-City kontaktieren! Bitte beachtet das ihr dieses Tutorial keinesfalls kopieren oder zum Download anbieten dürft! Ein Verstoß hat rechtliche Konsequenzen!
MfG,
Andi
(c) by roddweiler1992