Ausklappmenu mit javascript
Es gibt im CSS ein Befehl visibility
visibility kann entweder visible sein oder hidden.
entweder sichtbar oder unsichtbar
Mit javaScript gibt es eine Möglichkeit CSS Eigenschaften zu beeinflussen.
Wenn man mit javaScript die visibility von einem HTML Objekt beeinflussen möchte,
sollte dieses Objekt eine ID haben.
Dann kann über den javaScript Befehl getElementById("IDname")
folgendermassen auf die visibility zugegriffen werden;
document.getElementById("IDname").style.visibility = "hidden";
Du siehst hier drei Punktzeichen.
Die Punktnotation ist eine Art Pfad Angabe innerhalb eines Dokuments.
Zuerst steht das ganze im document
Vom document aus wird die Methode getElementById aufgerufen,
dazwischen kommt ein Punkt
Dann wird von dem dadurch gefundenen Element mit style die CSS Eigenschaften aufgerufen,
dazwischen kommt ein Punkt
Von den CSS Eigenschaften wird hier die Eigenschaft visibility aufgerufen,
dazwischen kommt ein Punkt
Dieser so angesteuerten Eigenschaft wird schlussendlich mit dem gleichzeichen der Wert hidden gegeben.
Du erinnerst Dich sicher, das gleich nicht gleich heisst sondern eine Abfüllstation ist.
Es wird immer der Teil rechts vom gleich in den Teil links vom gleich eingefüllt.
Ein richtiges gleich also ein vergleichendes gleich sind immer zwei gleichs ==
Der folgenden Code stellt ein einfaches Ausklappmenu dar.
Wenn der User über das Wort Raubtier fährt mit der Maus,
werden mit einem Ausklappmenu vier mögliche Raubtiere angeboten.
schaue Dir das Beispiel an und fahre mit der Maus über Raubtiere.
Der Strich neben den Auswahlmöglichkeiten ist reine Dekoration
und wurde mit der Klasse hellblauRand gestylt.
Neu dabei ist diese Zeile;
border-width:0px 0px 0px 3px;
Sie ist eine Kurzschreibweise von dem;
border-width-top:0px;
border-width-right:0px;
border-width-bottom:0px;
border-width-left:3px;
Die erste Pixelangabe ist immer oben
Die zweite rechts
Die dritte unten
die vierte links
Es fängt also oben an und geht im Urzeigersinn rund herum.
Auf den body gibt es eine Direktansprache
In der wird die Schriftgrösse und die Schriftfarbe für das ganze Dokument bestimmt.
In dem Fall trift das nur auf Raubtiere zu.
Die vier anderen Wörter im Aufklappmenu sind Links
Ihr Style wird mit Pseudoklassen geregelt.
Im body ist das ganze in drei div verschachtelt
Der äusserste heisst ganzerInhalt und ist nur da,
damit man mit position absolut alles genau dorthin bringen kann, wohin man möchte.
Im zweiten div mit dem Namen Navi ist das Raubtier mit seinem Ausklappmenu.
im dritten div mit dem Namen menublock ist das Ausklappmenu mit den blinden Links.
Sowohl über dem Raubtier wie den Ausklappmenu werden zwei Funktionen aufgerufen.
Die Funktion auf() mit onmouseover
Die Funktion zu() mit onmouseout
in der Funktion auf() wird die ID menublock sichtbar gemacht.
in der Funktion zu() wird die ID menublock unsichtbar gemacht.
Hier also der Code;
<html>
<head>
<title>Ausklappmenu einfach</title>
<head>
<title>Ausklappmenu einfach</title>
<style type="text/css">
body {
color:#2D3C71;
font-size:24px;
}
#ganzerInhalt {
position:absolute;
width:740px;
left:90px;
top:85px;
}
#Navi {
width:120px;
left:20px;
}
#menublock {
visibility:hidden;
width:100px;
}
.hellblauRand {
border-width:0px 0px 0px 3px;
border-style:solid;
border-color:#89A4B8;
margin-left: -11px;
padding-left: 8px;
}
a {
text-decoration:none;
color:#2D3C71;
font-size:24px;
}
a:hover {
color:#C96;
}
a:active {
color:#cccc13;
}
</style>
<script type=text/javascript>body {
color:#2D3C71;
font-size:24px;
}
#ganzerInhalt {
position:absolute;
width:740px;
left:90px;
top:85px;
}
#Navi {
width:120px;
left:20px;
}
#menublock {
visibility:hidden;
width:100px;
}
.hellblauRand {
border-width:0px 0px 0px 3px;
border-style:solid;
border-color:#89A4B8;
margin-left: -11px;
padding-left: 8px;
}
a {
text-decoration:none;
color:#2D3C71;
font-size:24px;
}
a:hover {
color:#C96;
}
a:active {
color:#cccc13;
}
</style>
function zu()
{
document.getElementById("menublock").style.visibility = "hidden";
}
function auf()
{
document.getElementById("menublock").style.visibility = "visible";
}
</script>{
document.getElementById("menublock").style.visibility = "hidden";
}
function auf()
{
document.getElementById("menublock").style.visibility = "visible";
}
</head>
<body>
<br />
<br />
<br />
<div id="ganzerInhalt">
<div id="Navi" onmouseover="auf()" onmouseout="zu()">Raubtiere
<div id="menublock" onmouseover="auf()" onmouseout="zu()" class="hellblauRand">
<a href="#" onfocus="if(this.blur)this.blur()" >Löwe</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" >Panter</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" >Katze</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" >Hai</a>
</div>
</div>
</div>
</body>
</html>
<body>
<br />
<br />
<br />
<div id="ganzerInhalt">
<div id="Navi" onmouseover="auf()" onmouseout="zu()">Raubtiere
<div id="menublock" onmouseover="auf()" onmouseout="zu()" class="hellblauRand">
<a href="#" onfocus="if(this.blur)this.blur()" >Löwe</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" >Panter</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" >Katze</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" >Hai</a>
</div>
</div>
</div>
</body>
</html>
Funktionen und ihre Parameter
Wenn jetzt mehrere Ausklappmenu neben einander stehen sollen,
kann eine Besonderheit von Funktionen helfen.
Die Funktionen, die wir bis jetzt gemacht haben,
haben alle nach ihrem Namen ein öffnende und schliessende Klammer.
Wieso das?
Hier kann der Funktion noch zusätzliche Information mit gegeben werden.
Man nennt das Parameter.
Hier ein Beispiel
function rechnen(a,b,c){
}
}
Wenn nun diese Funktion irgendwo aufgeruft wird, kann das so aussehen;
onclick="rechnen(11,3,2)"
Dem Platz mit dem Namen a wird 11 mitgegeben.
Dem Platz mit dem Namen b wird 3 mitgegeben.
Dem Platz mit dem Namen c wird 2 mitgegeben.
Die Plätze a b und c könnten auch Arthur, Berta oder Kaffemaschine heissen, das ist egal.
Diese Plätze oder eben Parameter
können nun innerhalb der Funktion gebraucht werden wie eine Variable.
(Es könnte statt einer Zahl auch ein String also eine Buchstabenkette mitgegeben werden.
Dann müsste der Wert aber in Anführungs und Schlusszeichen stehen.)
Die Funktion könnte zum Beispiel folgendes machen mit den mitgegebenen Parameter;
function rechnen(a,b,c){
ergebnis= a+b+c;
}
ergebnis= a+b+c;
}
Das wäre ja schön für die Funktion,
aber die Welt würde davon nie etwas erfahren.
Eine Möglichkeit der Welt das Ergebnis mit zu teilen wäre, die javaScript Methode .innerHTML
Das sieht dann so aus;
function rechnen(a,b,c,d){
document.getElementById("ergebnis").innerHTML=""+[a+b+c];
}
document.getElementById("ergebnis").innerHTML=""+[a+b+c];
}
innerHTML erwartet als Wert eine Buchstabenkette. Darum zuerst die zwei Anführungszeichen.
Dann möchten wir diesem Nichts, dass jetzt eine Buchstabenkette ist, das Ergebnis anhängen.
würden wir das so machen;
document.getElementById("ergebnis").innerHTML=""+a+b+c;
wäre das Resultat;
1132
Er würde die 11, die 3 und die 2 als Buchstaben sehen und alles aneinander hängen.
Darum die eckige Klammer.
Die eckige Klammer bewirkt, dass aus ihrem Inhalt zuerst der Wert ausgerechnet wird.
document.getElementById("ergebnis").innerHTML=""+[a+b+c];
nun ist das Ergebnis;
16
also genau das, was wir erwartet haben.
Nun braucht es nur noch ein ID ergebnis
zum Beispiel ein <span id=ergebnis></span>
Und schon wird das wunderbare Werk unser Funktion rechnen(a,b,c) in diesen span hinaus geschrieben.
Wenn wir jetzt mehrere Orte hätten, an denen unsere super schlaue Funktion rechnen aufgerufen würde,
weiss der Browser nicht mehr wohin mit den Resultaten.
Auch das können wir lösen mit einem Parameter, den wir der Funktion Rechnen mitgeben.
Der Einfachheit halber hängen wir einfach noch ein Parameter d an;
function rechnen(a,b,c,d){
document.getElementById("ergebnis"+d).innerHTML=""+[a+b+c];
}
document.getElementById("ergebnis"+d).innerHTML=""+[a+b+c];
}
Beachte den Namen der ID!
Je nachdem, was wir der Funktion als vierten Parameter mitgeben,
Gibt das einen anderen Namen!
Geben wir bei ersten Aufruf eine 1 mit
beim zweiten eine 2
u.s.w
gibt das folgende ID Namen;
ergebnis1
ergebnis2
ergebnis3
u.s.w
Hier nun das Beispiel;
Klicke auf die Rechnungen und das Resultat wird neben an erscheinen.
Verlässt die Maus die Zeile, wird mit onmouseout mit der Funktion loeschen(d) das Ergebnis wieder gelöscht.
Ich gebe zu dieses Beispiel war nun mega trocken.
Bis zum Abwinken zum Gähnen !!
Nichts desto trotz;
Schau Dir dieses Beispiel sehr genau an!
Wenn Du DAS begriffen hast, liegt Dir die Computerwelt zu Füssen.
Bis zum Abwinken zum Gähnen !!
Nichts desto trotz;
Schau Dir dieses Beispiel sehr genau an!
Wenn Du DAS begriffen hast, liegt Dir die Computerwelt zu Füssen.
Hier also der Code;
<html>
<head>
<title>Funktionen Parameter</title>
<script type="text/javascript"> <head>
<title>Funktionen Parameter</title>
function rechnen(a,b,c,d){
document.getElementById("ergebnis"+d).innerHTML=" "+[a+b+c];
}
function loeschen(d){
document.getElementById("ergebnis"+d).innerHTML=""
}
</script> document.getElementById("ergebnis"+d).innerHTML=" "+[a+b+c];
}
function loeschen(d){
document.getElementById("ergebnis"+d).innerHTML=""
}
</head>
<body>
<div onclick="rechnen(2,3,8,1)" onmouseout="loeschen(1)">
2 und 3 und 8 = <span id="ergebnis1"></span></div>
<div onclick="rechnen(0,3,1,2)" onmouseout="loeschen(2)">
0 und 3 und 1 = <span id="ergebnis2"></span></div>
<div onclick="rechnen(1,2,1,3)" onmouseout="loeschen(3)">
1 und 2 und 1 = <span id="ergebnis3"></span></div>
<div onclick="rechnen(2,2,2,4)" onmouseout="loeschen(4)">
2 und 2 und 2 = <span id="ergebnis4"></span></div>
<div onclick="rechnen(3,4,5,5)" onmouseout="loeschen(5)">
3 und 4 und 5 = <span id="ergebnis5"></span></div>
<div onclick="rechnen(2,43,3,6)" onmouseout="loeschen(6)">
2 und 43 und 3 = <span id="ergebnis6"></span></div>
<br />
<br />
klicke auf die einzelnen Rechnungen!
</body>
</html>
<body>
<div onclick="rechnen(2,3,8,1)" onmouseout="loeschen(1)">
2 und 3 und 8 = <span id="ergebnis1"></span></div>
<div onclick="rechnen(0,3,1,2)" onmouseout="loeschen(2)">
0 und 3 und 1 = <span id="ergebnis2"></span></div>
<div onclick="rechnen(1,2,1,3)" onmouseout="loeschen(3)">
1 und 2 und 1 = <span id="ergebnis3"></span></div>
<div onclick="rechnen(2,2,2,4)" onmouseout="loeschen(4)">
2 und 2 und 2 = <span id="ergebnis4"></span></div>
<div onclick="rechnen(3,4,5,5)" onmouseout="loeschen(5)">
3 und 4 und 5 = <span id="ergebnis5"></span></div>
<div onclick="rechnen(2,43,3,6)" onmouseout="loeschen(6)">
2 und 43 und 3 = <span id="ergebnis6"></span></div>
<br />
<br />
klicke auf die einzelnen Rechnungen!
</body>
</html>
Mehrere Ausklappmenus neben einander
Nach diesem extrem trockenen Beispiel oben nun eine kreative Anwendung;
Probiere zuerst das Resultat aus.
Du kannst auf alle zwölf Links, die sich in den drei Aufklappmenus zeigen klicken!
Zu jedem wird sich darunter ein passendes Bild zeigen.
Hier nun der Code;
<html>
<head>
<title>Ausklappmenu</title>
<head>
<title>Ausklappmenu</title>
<style type="text/css">
body {
color:#2D3C71;
font-size:24px;
}
#Bild{
position:relative;
top:181px;
}
.hellblauRand{
border-width:0px 0px 0px 3px;
border-style:solid;
border-color:#89A4B8;
margin-left: -11px;
padding-left: 8px;
}
#Navi1 {
position:absolute;
width:120px;
left:20px;
}
#Navi2 {
position:absolute;
width:120px;
left:200px;
}
#Navi3 {
position:absolute;
width:140px;
left:380px;
}
#ganzerInhalt {
position:absolute;
width:740px;
left:90px;
top:85px;
}
a {
text-decoration:none;
color:#2D3C71;
font-size:24px;
}
a:hover {
color:#C96;
}
a:active {
color:#cccc13;
}
</style>
<script type=text/javascript> body {
color:#2D3C71;
font-size:24px;
}
#Bild{
position:relative;
top:181px;
}
.hellblauRand{
border-width:0px 0px 0px 3px;
border-style:solid;
border-color:#89A4B8;
margin-left: -11px;
padding-left: 8px;
}
#Navi1 {
position:absolute;
width:120px;
left:20px;
}
#Navi2 {
position:absolute;
width:120px;
left:200px;
}
#Navi3 {
position:absolute;
width:140px;
left:380px;
}
#ganzerInhalt {
position:absolute;
width:740px;
left:90px;
top:85px;
}
a {
text-decoration:none;
color:#2D3C71;
font-size:24px;
}
a:hover {
color:#C96;
}
a:active {
color:#cccc13;
}
</style>
function zu(a,b,c)
{
document.getElementById("menublock1").style.visibility = "hidden";
document.getElementById("menublock2").style.visibility = "hidden";
document.getElementById("menublock3").style.visibility = "hidden";
}
function auf(a,b,c)
{
document.getElementById("menublock"+a).style.visibility = "visible";
document.getElementById("menublock"+b).style.visibility = "hidden";
document.getElementById("menublock"+c).style.visibility = "hidden";
}
function Tierwahl(x){
document.getElementById("Tier").src = "Bilder/Bilderneu/Tier"+x+".jpg";
}
</script> {
document.getElementById("menublock1").style.visibility = "hidden";
document.getElementById("menublock2").style.visibility = "hidden";
document.getElementById("menublock3").style.visibility = "hidden";
}
function auf(a,b,c)
{
document.getElementById("menublock"+a).style.visibility = "visible";
document.getElementById("menublock"+b).style.visibility = "hidden";
document.getElementById("menublock"+c).style.visibility = "hidden";
}
function Tierwahl(x){
document.getElementById("Tier").src = "Bilder/Bilderneu/Tier"+x+".jpg";
}
</head>
<body>
<img src="Bilder/Bilderneu/Titel.jpg" />
<div id="ganzerInhalt">
<div id="Navi1" onmouseover="auf(1,2,3)" onmouseout="zu()"> Raubtiere
<div id="menublock1" onmouseout="zu()" onmouseover="auf(1,2,3)" style="visibility:hidden" class="hellblauRand">
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(1)" >Löwe</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(2)" >Panter</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(3)" >Katze</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(4)" >Hai</a> <br />
</div>
</div>
<div id="Navi2" onmouseover="auf(2,1,3)" onmouseout="zu()"> Vögel
<div id="menublock2" onmouseout="zu()" onmouseover="auf(2,1,3)" style="visibility:hidden" class="hellblauRand">
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(5)" >Uhu</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(6)" >Adler</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(7)" >Amsel</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(8)" >Zaunfink</a> <br />
</div>
</div>
<div id="Navi3" onmouseover="auf(3,2,1)" onmouseout="zu()"> Nagetiere
<div id="menublock3" onmouseout="zu()" onmouseover="auf(3,2,1)" style="visibility:hidden" class="hellblauRand">
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(9)" >Hase</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(10)" >Meerschwein</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(11)" >Ratte</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(12)" >Hamster</a> <br />
</div>
</div>
<div id="Bild">
<img src="Bilder/Bilderneu/weiss.jpg" id="Tier"/>
</div>
</div>
</body>
</html>
<body>
<img src="Bilder/Bilderneu/Titel.jpg" />
<div id="ganzerInhalt">
<div id="Navi1" onmouseover="auf(1,2,3)" onmouseout="zu()"> Raubtiere
<div id="menublock1" onmouseout="zu()" onmouseover="auf(1,2,3)" style="visibility:hidden" class="hellblauRand">
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(1)" >Löwe</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(2)" >Panter</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(3)" >Katze</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(4)" >Hai</a> <br />
</div>
</div>
<div id="Navi2" onmouseover="auf(2,1,3)" onmouseout="zu()"> Vögel
<div id="menublock2" onmouseout="zu()" onmouseover="auf(2,1,3)" style="visibility:hidden" class="hellblauRand">
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(5)" >Uhu</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(6)" >Adler</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(7)" >Amsel</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(8)" >Zaunfink</a> <br />
</div>
</div>
<div id="Navi3" onmouseover="auf(3,2,1)" onmouseout="zu()"> Nagetiere
<div id="menublock3" onmouseout="zu()" onmouseover="auf(3,2,1)" style="visibility:hidden" class="hellblauRand">
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(9)" >Hase</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(10)" >Meerschwein</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(11)" >Ratte</a> <br />
<a href="#" onfocus="if(this.blur)this.blur()" onclick="Tierwahl(12)" >Hamster</a> <br />
</div>
</div>
<div id="Bild">
<img src="Bilder/Bilderneu/weiss.jpg" id="Tier"/>
</div>
</div>
</body>
</html>
Bei div menublock 1, 2 und 3 hatte leider nicht ganz alles Platz auf einer Zeile.
Ansonsten gibt es zu diesem Beipiel nicht mehr viel zu erklären,
nach den zwei einleitenden Beispielen oben.
Schaue besonders auf die Parameter a,b und c in der Funktion auf(a,b,c)
Im Parameter a wird jeweils mitgegeben welcher Aufklappblock aufgeklappt werden soll.
Bei der Funktion Tierwahl, wird mit dem Parameter x eine Zahl mitgegeben aus der dann der Linkpfad zusammen geknüpft wird.
Wie das geschieht ist im vorhergehenden Kapitel "Eine Bildergalerie mit javaScript" genau beschrieben.
Ich hoffe Du bekamst jetzt Lust eine eigene coole Webseite mit Ausklappmenu zu gestalten.
Falls Du den Code abschreiben möchtest, was sicher der beste Lerneffekt wäre,
Kannst Du Deine Übungsdatei mit einem anderen Namen in den Ordner Unterlagen speichern.
Dann findet der Browser die Bilder.
Wenn Du on-line arbeitest sind die Bilder unter folgender absoluten Adresse;
http://www.kieselsteine.ch/Unterlagen/Bilder/Bilderneu/Tier1.jpg
http://www.kieselsteine.ch/Unterlagen/Bilder/Bilderneu/Tier2.jpg
u.s.w.