Jquery Frage?

iSebastian · 15. November 2011

Geehrte Community,

Heute mal mit einer etwas anderen Frage. Ich habe alles ein wenig komisch formuliert aber naja Dennoch hoffe ich das Ihr mir helfen könnt

Nun zu meiner eigentlichen Frage Ich möchte für meine Homepage ein kleines Fensterchen machen was man auf und zu sliden lassen kann. Dies soll auf Knopfdruck passieren! Wichtig ist dabei , dass die Box nicht komplett ausgeblendet werden soll sondern sich nach oben aufschieben und in Falle der Schließung sich wieder einziehen soll. Entschuldigt für diese markante Beschreibung aber schaut euch einmal dieses Bild an.

http://www.creative-styles.org/vorschi.png

Sobald man auf "Menü aufklappen" klickt soll die Leiste(sollte aber als Div Definiert sein da noch Text darein kommt) hochgefahren werden. Und bei Klick auf "Menü zu" sollte es wieder in den Normalen Zustand überspringen.

Nun die Fragen dazu...
... wie nennt man so ein Menü?
... könnte mir jemand einen Beispiel Code geben oder Links die zeigen wie soetwas funktioniert?
... Ist sowas schwer?

Ich verfüge über HTML und CSS Kenntnisse sowie geringfügig Java.
Vielen Vielen Dank im Vorraus!

Trooper[Y] · 15. November 2011

1.) "Menü" ?! Kommt drauf an, was da rein soll, evtl isses ja eine "Navigationsleiste"...
2.) Such nach "jquery animate". Musst dort nur die div-höhe ändern lassen.
3.) Kommt auf dein Wissen bzgl CSS, JS und jQuery an

[PhiL] · 15. November 2011

also sowie ich das verstanden habe sollte da jQuery.slideToggle() reichen.
Machst bei dem kleinen Button nen "onclick" rein und fährst das Div mit slideToggle an.

maddin · 15. November 2011

JavaScript

var is_open = false; //variable zum abfragen ob das fenster offen oder geschlossen ist.
$('#ID_DES_PFEIL_CONTAINERS').click(function() { //Wenn der Pfeil container angeklickt wird


	if(is_open) { //Wenn das Menu offen ist


		$('#ID_DES_MENU_CONTAINERS').slideDown(); //Menu container nach unten sliden
		$('#ID_DES_PFEIL_CONTAINERS').attr('src', 'pfad/zum/pfeil/nach/oben.png'); //Den Pfeil austauschen, so das er nach oben zeigt
		is_open = false; //variable zum abfragen ändern


	} else { //Wenn das Menu geschlossen


		$('#ID_DES_MENU_CONTAINERS').slideUp(); //Menu container nach oben sliden
		$('#ID_DES_PFEIL_CONTAINERS').attr('src', 'pfad/zum/pfeil/nach/unten.png'); //Den Pfeil austauschen, so das er nach unten zeigt
		is_open = true; //variable zum abfragen ändern


	}
});

Alles anzeigen

Anstatt einer extra variable könnte man glaube ich auch per

JavaScript

$(element).is(":visible")

abfragen ob das menu geöffnet oder geschlossen ist, aber da ich mir da gerade nicht ganz sicher bin hab ichs gelassen.
Der ganze Code ist ungetestet, aber laut meinem kopf sollte das so funktionieren.

breadfish.de 11. März 2022