Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform,
sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc
zu kontaktieren.
Dieses kurze Tutorial will zeigen wie man mit JavaScript aufklappbare Menüs macht.
Diese sparen ja eine Menge Platz. In diesem Beispiel verwende ich Listen die aufgeklappt
werden, indem Teile der Liste unsichtbar sind und auf Knopfdruck sichtbar gemacht
werden. Der Anfang wird gemacht mit einem kurzen JavaScript
im HEAD-Bereich.
<script type="text/javascript">
function switchlayer(Layer_Name)
{
var GECKO = document.getElementById? 1:0 ;
var NS = document.layers? 1:0 ;
var IE = document.all? 1:0 ;
if (GECKO)
{document.getElementById(Layer_Name).style.display=
(document.getElementById(Layer_Name).style.display=='block') ? 'none' : 'block';}
else if (NS)
{document.layers[Layer_Name].display=(document.layers[Layer_Name].display==
'block') ? 'none' : 'block';}
else if (IE)
{document.all[Layer_Name].style.display=(document.all[Layer_Name].style.display==
'block') ? 'none' : 'block';}
}
</script>
Anfangs wird gecheckt welchen Browsertyp der Besucher verwendet. Dies macht man durch
checken welcher Objekt-Typ verwendet wird (diese wurden durch die Browser-Hersteller
nicht standarisiert). Was Sie da sehen, ist eine verkürzte Version von einer IF-Abfrage.
Es wird eine Bedingung gestellt (Fragezeichen) und dann kommt die Anweisung für dem
Browser wenn es TRUE ergibt (Variable bekommt den Wert "1") und danach die Anweisung
für dem Fall das die Abfrage FALSE ergibt (Variable bekommt den Wert "0"). Wenn das Script
aufgerufen wird, wird ein Element, je nachdem ob es sichtbar ist oder nicht, sichtbar
bzw. unsichtbar gemacht (anfangs soll das Untermenü auf "display:none;" stehen).
Jetzt kommen wir zur Navigationsliste selbst. Nur zwei Listenpunkten werden angezeigt,
wenn man jedoch eine davon auswählt, wird ein Unterteil sichtbar gemacht. Beim betätigen
des Links wird das Script ausgeführt. Man soll aber als Parameter die ID der Untermenüs
mitgeben. Desweiteren wird beim onClick-Befehl "return false" definiert. Dies teilt den
Browser mit, dass er den eigentlichen Link nicht folgen soll. Wenn JavaScript inaktiv ist,
wird so der alternative Link gefolgt, aber auch nur dann. Um das aufklappbare Menü alternativ
auch mit PHP zu bauen, klicken Sie HIER
(mit JavaScript muss die Seite nicht jedesmal neu geladen werden). Wenn Sie mehr wissen möchten
über Listen, klicken Sie HIER.
Ja, sorry, das hatte ich auf der Startseite wiklich zweimal drin, aber daran liegt es nicht, habe es da nun einmal raus genommen, geht trotzdem unter Firefox nicht auf, ich habe jetzt nochmal den Code kontrolliert ob ich evtl. etwas nicht richtig reinkopiert habe, aber steht genauso drin, wie hier vorgegeben, ich weiß wirklich nicht, woran das liegt.
Sieht so aus als ob du die Funktion switchlayer() zweimal im Quellcode stehen hast. Das könnte dazu führen dass ein Browser beim Parsen des Quellcodes deiner Seite einen Fehler aufruft, nl. dass die Funktion switchlayer() schon vorher definiert wurde.
Ich habe mir das Script oben so bei mir rein geschrieben, aber in FireFox opera usw klappen die Untermenuüs nicht auf sonder es kommt er verbindet zur Seite ...Untermenue.php. kannst du dir hier mal anschauen, wenn du magst www.my-skalare.de, die untermenues sind bei Links und bei Besuche. Mit IE funktioniert das tadellos, nur ich bekam Zuschriften, das diese mit den anderen Browsern nicht geht. Bei mir mit Firefox gehts auch nicht.
Was meinst du denn mit einem "Hintergrundstyle"? Grafiken, Farben, ... ? Das geht mit CSS und hat nichts mit der Eigenschaft "display" zu tun. Weiß aber nicht was du genau meinst.
möchte mal fragen wie ich das mit <div id=XX></div> machen kann?
====
<a href="#" onclick="javascript:switchlayer('1'); return false;"><strong>Christian Mühlroth</strong></a>
<div id="1">
Ich komme aus Deutschland!
</div>
<br><br>
<a href="#" onclick="javascript:switchlayer('2'); return false;"><strong>Bilanovic Marko</strong></a>
<div id="2">
Ich komme aus Schweiz!
</div>
====
das die unterkategorie bleibt draussen wen ich auf die seite zugreife, wie kann ich das verhindern?
EDIT:
fall gelöst ;) hab " style="display:none;" " vergessen ;)
zufällig bin ich auf dieses Forum gestoßen und hier scheine ich das zu finden, was ich so dringend suche.
Ich möchte auf meiner HP eine Menüleiste haben, die ich 1. farblich gestalten kann und 2. wo Untermenü´s angezeigt werden, wenn man den jeweiligen Menüpunkt anklickt. Das aufklapbare Menü ist schon sehr schön, aber ganz reicht mir das nicht.
Es wäre lieb, wenn mir da jemand weiterhelfen könnte.
function haupt(untermenue)
{
var hauptmenues = new Array('ferrari','lamborghini','porsche');
for (var menue in hauptmenues)
{
var das_menue = hauptmenues[menue];
if (GECKO) {document.getElementById(das_menue).style.display = 'none';}
else if (NS) {document.layers[das_menue].style.display = 'none';}
else if (IE) {document.all[das_menue].style.display = 'none';}
}
aufklappen(untermenue);
}
function aufklappen(untermenue)
{
if (GECKO) {document.getElementById(untermenue).style.display = 'block';}
else if (NS) {document.layers[untermenue].style.display = 'block';}
else if (IE) {document.all[untermenue].style.display = 'block';}
}
function zuklappen(untermenue)
{
if (GECKO) {document.getElementById(untermenue).style.display = 'none';}
else if (NS) {document.layers[untermenue].style.display = 'none';}
else if (IE) {document.all[untermenue].style.display = 'none';}
}
</script>
fand den Artikel sehr interessant. Fast genau wonach ich immer suchte.
Wie aber macht man es, dass die Untermenüs schon bei mouseover aufklappen, dann sichtbar bleiben, so dass man auch evtl. eines der Untermenüs anklicken kann und erst wieder einklappen, wenn man mit der Mouse über ein anderes Hauptmenü fährt?
----------------------------------------------------- \"I have to share the credit. I may have invented it, but I think Bill made it famous. -- When he used it for the NT logon, that\'s what I meant. okay?\" (David Bradley über Ctrl-Alt-Del)
