Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Klappmenu per Javascript



Ranking: +1   Kommentare: 11   |   Bewertung: Keine Berechtigung!  

Vorwort


so, heute erstellen wir ein klappmenu mit javascirpt:

Schritt 1


was wollen wir? ein menu mit unterkategorien.
zuerst beginnen wir mit der Struktur:

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>



<body>

<a href="#">navi_1</a>

<div id="subnavi_1" style="display: none;">

<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi

</div>

<br>

<a href="#">navi_2</a>

<div id="subnavi_2" style="display: none;">

<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

</div>

</body>

</html>



das ist jetzt mal die html-datei min der navigation und den unterkategorien.
das

Code:


style="display: none;"

gibt an, dass das ganze div unsichtbar ist.

Schritt 2


jetzt müssen wir per javascript beim click auf den button den style des div-tags ändern, damit er sichtbar wird.
das würde so funktionieren:

Code:


document.getElementById('_hier_elementname_').style.display == 'inline'


der elementname ist die id des div-tags also in diesem fall für die erste navi "subnavi_1" und für die zweite "subnavi_2".


Schritt 3


soo, jetzt sollte man das ganze aber auch wieder zuklappen können, wenn es geöffnet ist. das machen wir mit einer simplen if-abfrage:

Code:


if (document.getElementById('subnavi_1').style.display == 'inline') { 

                        document.getElementById('subnavi_1').style.display = 'none'; 

} else { 

                        document.getElementById('subnavi_1').style.display = 'inline'; 

}



Schritt 4


der schlussendliche code sieht dann so aus:

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>



<body>

<a href="#" onClick="if (document.getElementById('subnavi_1').style.display == 'inline') { 

                        document.getElementById('subnavi_1').style.display = 'none'; 

                    } else { 

                        document.getElementById('subnavi_1').style.display = 'inline'; 

                    }">navi_1</a>

<div id="subnavi_1" style="display: none;">

<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi

</div>

<br>

<a href="#" onClick="if (document.getElementById('subnavi_2').style.display == 'inline') { 

                        document.getElementById('subnavi_2').style.display = 'none'; 

                    } else { 

                        document.getElementById('subnavi_2').style.display = 'inline'; 

                    }">navi_2</a>

<div id="subnavi_2" style="display: none;">

<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

&nbsp;sub_navi<br>

</div>

</body>

</html>




das ganze kann _hier_ angeguckt werden.

so das wars, bei fragen:
email: raphael.keusch@gmail.com
msn: raphael.keusch@gmx.ch
ICQ: 209 184 537

cheers

Schritt 5


bis zum nächsten mal ;-)


Veröffentlicht von: dini mueter
Veröffentlicht am: 28 Mar. 2005
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter:

Kommentar(e) (11)


CrAc sagt:

manchma brauch man display="inline" nich...
einfach display="" übergeben, sow ird das ganze auf den standartwert zurückgesetzt =)

29 Jan. 2009 22:00:56 • Antworten


deleted_1267831731 sagt:

Das Beispiel geht nicht!!!!!

14 May. 2008 23:49:02 • Antworten


deleted_1330623064 sagt:

Ist sehr cool :)
Verständlich auchnoch danke dir

24 Jan. 2008 17:12:16 • Antworten


Venomace sagt:

oder wieder nciht??ß?

19 Jul. 2007 18:47:40 • Antworten


ghoum sagt:

Hmm... das Beispiel geht aber immernoch nicht?

13 Apr. 2006 20:50:30 • Antworten


Hellracer sagt:

Geiles Tut. Danke. Hat mir geholfen.

12 Jan. 2006 20:10:38 • Antworten


dini mueter sagt:

jo, hab jetzt das beispiel wieder hochgeladen :D sollte wieder gehen .. :ja: :D

19 Aug. 2005 21:49:44 • Antworten


dini mueter sagt:

jo, hab jetzt das beispiel wieder hochgeladen :D sollte wieder gehen .. :ja: :D

19 Aug. 2005 21:48:36 • Antworten


mr_125 sagt:

das beispiel is nich mher zu finden

würd gern ma sehn wei es ausshieht

16 Jun. 2005 17:38:02 • Antworten


Faceless Butcher sagt:

Gutes Tutorial, echt cool

7 Apr. 2005 17:40:44 • Antworten



Anfang

<<

1

2>>Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder