Nobi
ist super gemacht =) 6 Blümchen ^^
am 03.02.2008 um 21:59 Uhr
Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
10x bewertet
Switch Menü
von
Larita |
03.02.2008 um 18:38 h
Typ: Javascript Anwendungen
Stufe:Einfach Mittelmäßig
Stufe:Einfach Mittelmäßig
Ich möchte euch in diesem Tutorial eine Möglichkeit zeigen, euren Content sauber und übersichtlich zu gestalten & den Inhalt so für Besucher zugänglicher zu machen.
Hier habe ich eine Beispielseite für euch.
Eine andere Variante wären Anker, zu denen ihr hier ein Tutorial findet.
Nun wollen wir aber anfangen
Zu beginn fügt ihr bitte folgenden Code in den Head-Bereich (sprich irgendwo zwischen <head> und </head>)eures Dokumentes ein.
Wenn ihr das Ganze bei PHP-Dokumenten machen wollt und dazu includet, braucht ihr es nur in die Header-Datei einfügen, der Code wird dann automatisch für jedes Dokument brauchbar.
Bei HTML-Dokumenten müsst ihr es in jede Seite einfügen, bei der ihr diesen Effekt erzielen wollt.
Nun aber der Code:
Am Besten ist es, ihr ändert nichts an dem Code, anpassen könnt ihr euer Switch Menü später über CSS-Klassen.
In dem Code wird beschrieben, welche Eigenschaften die einzelnen IDs (dazu später) haben werden & was passiert, wenn man sie anklickt, nämlich dass sie sich öffnen.
Nun zum eigentlichen Code, oberes musste ja nur sein, damit der Browser später die Befehle zuordnen kann.
Ihr fügt folgenden Code in eurem HTML-Dokument ein. Wo, bleibt euch überlassen, nur muss es logischerweise im Body-Tag sein.
Unschwer zu erkennen handelt es sich um das erste Switch-Menü der Beispielseite. Die id="masterdiv" umschließt immer ein ganzes Menü.
Danach kommt class="menutitle" . Der Text, der darin steht, ist später die Überschrift, also der Teil, den man anklicken muss, um den Rest sehen zu können.
onclick="SwitchMenu('sub1')" jetzt wird es interessant...
Hier wird festgelegt, dass es sich um den ersten Teilpunkt des Menüs handelt. Habt ihr mehrere Teilmenüs, müsst ihr weiter zählen, so heißt der nächste Unterpunkt "sub2" etc.
Achtung! In der folgenden Zeile greifen wir darauf zurück! Da steht id="sub1" . Das ist also das erste Submenü & die Überschrift wird auch genau dieses Menü öffnen.
Hier muss also genau die selbe Zahl stehen, wie in der Zeile darüber.
Prinzipiell war es das schon. Klingt alles etwas kompliziert, ist es aber nicht im geringsten.
Eine Kleinigkeit wäre viell. noch zu sagen. Wenn ihr mehrere masterdivs pro Dokument habt, so wie ich im Beispiel 2 habe, dürft ihr bei den Sub-Menüs nicht wieder bei "1" anfangen. Hat das erste Menü 5 Unterpunkte, fangt ihr im zweiten Menü bei "6" an zu zählen.
Die Zuordnungen dürften, wenn überhaupt das einzige Problem sein.
Bei Problemen, einfach einen Kommentar posten oder eine Nachricht schreiben,
LG Lara
Hier habe ich eine Beispielseite für euch.
Eine andere Variante wären Anker, zu denen ihr hier ein Tutorial findet.
Nun wollen wir aber anfangen
Zu beginn fügt ihr bitte folgenden Code in den Head-Bereich (sprich irgendwo zwischen <head> und </head>)eures Dokumentes ein.
Wenn ihr das Ganze bei PHP-Dokumenten machen wollt und dazu includet, braucht ihr es nur in die Header-Datei einfügen, der Code wird dann automatisch für jedes Dokument brauchbar.
Bei HTML-Dokumenten müsst ihr es in jede Seite einfügen, bei der ihr diesen Effekt erzielen wollt.
Nun aber der Code:
<script type="text/javascript">
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>
Am Besten ist es, ihr ändert nichts an dem Code, anpassen könnt ihr euer Switch Menü später über CSS-Klassen.
In dem Code wird beschrieben, welche Eigenschaften die einzelnen IDs (dazu später) haben werden & was passiert, wenn man sie anklickt, nämlich dass sie sich öffnen.
Nun zum eigentlichen Code, oberes musste ja nur sein, damit der Browser später die Befehle zuordnen kann.
Ihr fügt folgenden Code in eurem HTML-Dokument ein. Wo, bleibt euch überlassen, nur muss es logischerweise im Body-Tag sein.
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')"><b>• Intro</b></div>
<span class="submenu" id="sub1">
Dieser Text erscheint erst, wenn der Besucher auf die Fettgedruckte Überschrift klickt.
</span>
<div class="menutitle" onclick="SwitchMenu('sub2')"><b>• Credits</b></div>
<span class="submenu" id="sub2">
Dieser Text erscheint erst, wenn der Besucher auf die Fettgedruckte Überschrift klickt.
</span>
<div class="menutitle" onclick="SwitchMenu('sub3')"><b>• About Me</b></div>
<span class="submenu" id="sub3">
Dieser Text erscheint erst, wenn der Besucher auf die Fettgedruckte Überschrift klickt.
</span>
<br>
</div>
Unschwer zu erkennen handelt es sich um das erste Switch-Menü der Beispielseite. Die id="masterdiv" umschließt immer ein ganzes Menü.
Danach kommt class="menutitle" . Der Text, der darin steht, ist später die Überschrift, also der Teil, den man anklicken muss, um den Rest sehen zu können.
onclick="SwitchMenu('sub1')" jetzt wird es interessant...
Hier wird festgelegt, dass es sich um den ersten Teilpunkt des Menüs handelt. Habt ihr mehrere Teilmenüs, müsst ihr weiter zählen, so heißt der nächste Unterpunkt "sub2" etc.
Achtung! In der folgenden Zeile greifen wir darauf zurück! Da steht id="sub1" . Das ist also das erste Submenü & die Überschrift wird auch genau dieses Menü öffnen.
Hier muss also genau die selbe Zahl stehen, wie in der Zeile darüber.
Prinzipiell war es das schon. Klingt alles etwas kompliziert, ist es aber nicht im geringsten.
Eine Kleinigkeit wäre viell. noch zu sagen. Wenn ihr mehrere masterdivs pro Dokument habt, so wie ich im Beispiel 2 habe, dürft ihr bei den Sub-Menüs nicht wieder bei "1" anfangen. Hat das erste Menü 5 Unterpunkte, fangt ihr im zweiten Menü bei "6" an zu zählen.
Die Zuordnungen dürften, wenn überhaupt das einzige Problem sein.
Bei Problemen, einfach einen Kommentar posten oder eine Nachricht schreiben,
LG Lara
11 Kommentare
Tanya C. Silver
Toll *__*.Wie das geht wollte ich schon immer mal wissen ^^.
Von mir gib's auch sechs Blümchen :3.
am 04.02.2008 um 09:02 Uhr
Larita
Danke ihr drei, freut mich sehr, wenns gefällt
am 04.02.2008 um 13:55 Uhr
Nekoji
Ich hab das mal nach Skriptverwendung verschoben, da das Skript ja von Dynamic Drive ist und nicht selbst geschrieben.
am 06.02.2008 um 09:23 Uhr
Yoko
Schönes Tut :)
am 08.02.2008 um 11:39 Uhr
Larita
@ Nekoji: vielen dank, hab ich gar nicht dran gedacht
am 09.02.2008 um 15:09 Uhr
YuKiKo
Tolles Tut, vielen dank dafür ^^
am 02.12.2008 um 14:20 Uhr
Sinop
Das Tutorial gefällt mir sehr gut, schade nur dass die Beispielseite nciht funktioniert, das mag ich eigentlich ganz gern immer :)
am 09.12.2009 um 11:33 Uhr
Larita
@ sinop: stimmt, die Beispielseite müsste mal neu hochgeladen werden. Durch Serverwechsel etc. gehen die ja doch mal verloren xD Ich werd′ das mal demnächst machen :)
am 22.12.2009 um 16:43 Uhr
butterfly
tolles Tutorial
Aber ich hätte gerne, wenn man meine Seite öffnet, dass das erste Switch schon geöffnet ist. Geht das??????
Lg :)
am 10.01.2010 um 12:46 Uhr
Sasuke
schönes tut