Aufklappmenü mit Hilfe von js

[Yo_Low]

Hallo,
ich wollte mir für mein kleines Homepageprojekt ein aufklappbares Menü (welches sich auch wieder schließen lässt) einbauen, welches aber durch Klick und nicht durch Hovern gesteuert werden soll.

Bsp.: http://aktuell.de.selfhtml.org/artikel/javascript/treemenu/
-- Leider scheint das viel zu kompliziert zu sein .. ?

Leider hab ich null Ahnung von Javascript. Ich kann mir lediglich die Vorgänge teils logisch erklären.

Drum hab ich mir aus dem Internet eine Vorlage genommen, welche leider nicht funktionieren mag.
Hab's mal in jsfiddle übertragen -- http://jsfiddle.net/8wtMV/4/

Ansonsten lässt sich leider nicht sonderlich viel finden bzw. meine Suche scheint nicht treffend genug, da häufig nur die Dropdown-Menüs per CSS (hovern) erklärt werden.

Hoffentlich könnt ihr mir helfen.

Mit freundlichen Grüßen
Yo_Low

 

[AzRaIL]

Ich würde dir jQuery dazu empfehlen. Ist um einiges leichter. slidedown / slideup bzw slidetoggle für beides

http://api.jquery.com/slideToggle/

das sind vielleicht 3 zeilen code die du brauchst um so ein dropdownmenü zu programmieren

 

[Yo_Low]

Ah, nice.

Ist es möglich slidetoggle so einzustellen, dass es standardmäßig zugeklappt ist?
Derzeit ist es bspw. beim neuladen der Seite stets aufgeklappt und kann per Klick zugeklappt werden. Ich hätte es gerne andersrum, so dass es erst bei Klick sich öffnet.

MfG

 

[Tronjer]

Sicher geht das. slideToggle() legt man auf einem Eventlistener und es ist eigentlich nur eine Kombination von show() / hide() und einem Easing-Effekt. show() und hide() wiederum machen nichts anderes, als die styles display: block bzw. display: none als Inline-CSS in die entsprechenden Tags zu schreiben.

Aber bevor du hier weitere Fragen stellst, solltest du dir erstmal die Grundlagen aneignen. Das kann dir dieses Forum nicht abnehmen.

 

[Yo_Low]

Oh man...

erstmal danke ich für dein Beitrag.
Dieser ist leider wenig hilfreich. Du gibst mir zwar Ansätze, mit denen ich aber nichts anfangen kann, aufgrund fehlender Kenntnisse.
Drum ist das einzige was du tust, mir sagen, ich soll mich selber drum kümmern, indem ich mich mit javascript auseinandersetze.

Gut. Versteh ich. Natürlich sollte ich mich auch selber mit Javascript auseinander setzen. Doch werde ich dies nicht zum derzeitigen Standpunkt tun. Ich versuch mich derzeit in HTML/CSS und PHP einzuarbeiten. Javascript ist mir da noch zu komplex (Ich hab mir bereits Javascript-Tutorials durchgelesen). Bis ich den Stand erreicht hab, der notwendig ist, um mein Vorhaben zu realisieren, benötige ich noch einige Zeit (welche ich nur teils übrig hab).

Ich hatte versucht hier auf Unterstützung zu hoffen, damit ich das Vorhaben realisieren kann, da ich nur meine kleine private HP verbessern wollte.
Eigentlich hoffte ich, das mir jemand ein funktionierendes Script gibt (welches ich selbstverständlich analysieren würde, um die Funktionsweise dahinter zu verstehen), damit ich mein Vorhaben realisieren kann. So brauch ich mich derzeit noch nicht in Javascript einarbeiten (was ich später durchaus vorhabe) und kann mich weiter HTML/CSS und PHP widmen.

Ich danke für jeden Kommentar.
Mit freundlichen Grüßen
Yo_Low

 

[Tronjer]

Hilfe bedeutet Unterstützung beim Lernen, und du hast bereits einige Funktionen genannt bekommen, welche sich in der jQuery Doku nachlesen lassen. Möchtest du stattdessen lieber ein fertiges Script, dann musst du dich an die Jobbörse wenden.

 

[Yo_Low]

Möchtest du stattdessen lieber ein fertiges Script, dann musst du dich an die Jobbörse wenden.

Verstehe nicht, was du meinst - Whatever!

Ich hab mit meinen nun kleinen Kenntnissen eine Lösung hinbekommen. Diese will ich kurz noch posten - einfach um dieses Thema abzuschließen.

$("button").click(function(){
    $('#toggle').slideToggle('slow');
});

Hab zunächst mit Hilfe von slideToggle das Auf- und Zuklappen ermöglicht. Da ich nun den 'Zugeklappten'-Modus als Standard haben wollte, welcher sich erst durch Klick öffnet, habe ich noch das hinzugefügt:

$(document).ready(function(){
$('#toggle').addClass('togglecollapse');
});

Die Class 'togglecollapse' hat 'display: none;' als Eigenschaft.

Vielen Dank für eure Hilfe. Kritik ist immer erwünscht.

Mit freundlichen Grüßen
Yo_Low

 

[blabla333]

Es reicht, wenn du einfach der CSS-Klasse für #toggle die Eigenschaft display: none; setzt. Dann ist das ganze nicht sichtbar bzw. zugeklappt. Beim Klick auf den Button wird es dann geöffnet.

Alternativ kannst du auch einfach so rangehen:

$('#toggle).hide();
$("button").click(function(){
    $('#toggle').slideToggle('slow');
});

D.h. beim Aufruf des Scriptes wird zunächst einmal #toggle zugeklappt.

Beim ersten Vorschlag ist #toggle von Beginn an schon gar nicht zu sehen. Beim zweiten wird es beim Laden erst versteckt. Vor- und Nachteile liegen bei der Ansicht bzw. ob User JavaScript ein- oder ausgeschaltet haben.