jQuery für Webdesigner

Menü um Expand-Funktion mit Effekt erweitern und Projekt abschließen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Den Abschluss des Expand-Menüs bildet die Erweiterung der Einblend- um eine Ausblend-Funktion mit Hilfe einer Zustands-Objektabfrage und Tweening-Effekt-Funktionen. Gleichzeitig schließt damit auch das Projekt "biketravel-scotland" ab.

Transkript

In diesem Video zeige ich Ihnen den Abschluss unseres Expander-Menüs mit unserem selbst erstellten jQuery-Skript und das Einzige, was noch fehlt zu einem Expand-Menü, sind die Expand-Funktionen und das ist nicht mehr sehr viel Arbeit, weil die Haupt-Arbeit haben wir bereits vollzogen, indem wir uns Gedanken über die einzelnen Objekte gemacht haben, die wir nun ansprechen müssen. Ganz klein bisschen schauen wir uns jetzt noch an, wie wir an die nächsten Elemente herankommen und zwar sollen ja die Unterpunkte eingeblendet werden. Und das bedeutet also, dass ich also die Unterpunkte einblende, wenn diese quasi ausgeblendet sind. Das muss ich entsprechend an der Stelle tatsächlich etwas genauer spezifizieren, weil ich komme nicht so präzise dort dran, am besten können wir uns das mit der Konsole anschauen. So, und zwar gehe ich mit dem Selektor auf die Position $(this) und gemeint ist damit dieser ganze DOM-Selektor, den ich hier bereits kombiniert habe. Also die Variable $expand mit dem Selektor-Teil plus das, was hier alles noch folgt, das ist der Eintrag $(this). So, die Konsole brauch ich nicht mehr. Wechseln wir den Browser und schau ich mir an, wenn ich hier drauf klicke, was passiert hier. Ich habe hier genau diesen Punkt, aber den möchte ich nicht. Ja, klicke ich den an, dann habe ich diesen Menüpunkt. Jetzt möchte ja nicht diesen Menüpunkt einblenden, sondern das gesamte Kind-Objekt, was jetzt darauf folgt, das wir zuvor in diesem Befehl hier, an der Stelle ausgeblendet haben. So, und wie komme ich dort dran? Nichts leichter als das: Es gibt auch hier wieder eine Traversing-Funktion, eine Methode und die heißt einfach .next(). Und mit .next(), das bringt jetzt nicht sehr viel, weil – vielleicht doch, vielleicht könnte man das ausblenden, verhindern, so. Zeige ich Ihnen das, jetzt haben wir wieder alle drin. Jetzt klicke ich hier auf, zum Beispiel einen Hauptpunkt und Sie sehen: Genau das ist die Funktion .next(), dass ich von diesem Anklicken dieses Hauptpunktes auf diesen Block komme, und das ist der None-Block, und genau den brauche ich, der soll eingeblendet werden. Ja, und jetzt sind wir schon fast soweit. Das Einblenden selber ist jetzt nicht mehr sehr viel Arbeit, da gibt's eine Methode für, die heißt .slide…(), zum Beispiel Toggle. Wir könnten auch ganz normal wieder mittels CSS und display arbeiten, aber die Toggle-Funktion ist deswegen einfach schöner, weil sie so eine Art Motion-Effekt hat, das macht das Ganze etwas sanfter. Ich speichere das Dokument ab und wechsel wieder hierhin. Achso, zuvor muss man natürlich die Unterpunkte auch wieder ausblenden. So und dann gucken wir uns an, was jetzt hier passiert: Ich klicke auf Schottland. Wunderbar, das Ganze wird schön sanft und gleitend eingeschaltet. Ich klicke auf Edinburgh, auch das klappt. Auf Schottische Küche. Jetzt – was macht er nun, wenn ich wieder auf Schottland klicke? Er blendet das Ganze wieder aus. Woran liegt das? Das können wir hier sehr schön, ich habe die Funktion schon mal aufgerufen, in .slideToggle() uns anschauen. Und .slideToggle() hat verschiedene Optionen, die man zusätzlich darauf anwenden kann. Probieren Sie da ein bisschen mit aus, es ist wirklich spannend. Aber wichtig ist, dass hier oben in der Description die Info steht, Display or hide, also zeigt an oder versteckt die ausgewählten Elemente. Also, es ist wie eine Art Umschalter und das ist genau das, was wir für die Funktion hier benötigen. Also theoretisch könnte das Menü schon fast so stehen bleiben. Es ist ganz elegant, finde ich zumindest. So kann ich mir manuell meine Menüpunkte erweitern oder ja auch wieder schließen. Ich möchte allerdings, dass, wenn ich einen Menüpunkt anklicke, alle anderen sich automatisch wieder schließen und das ist nochmal etwas komplexer wie dieser Bereich. Aber damit man es besser lesen kann, nehme ich nun die Konsole wieder drumherum weg, die brauchen wir nicht mehr. Und führe den letzten Befehl ein, um das Expand-Menü abzuschließen. Auch hier greife ich mit $(this) auf den aktuellen Bereich zu und jetzt müssen Sie überlegen: Was muss ich denn jetzt ausblenden? Ich möchte wieder zurück von meinen eingeblendeten Blöcken auf die Hauptmenü-Punkte. Also .parent() wäre eine mögliche Traversing-Funktion und jetzt habe ich aber das Problem, dass ich alle Parent-Elemente wieder habe. Die möchte ich aber nicht, sondern ich möchte nur die heraussuchen, die gerade nicht aktiviert würden. So, das ist ein bisschen kompliziert, aber zunächst mal die Funktion, die mir etwas heraussucht, nennt sich .siblings(). Und mittels .siblings() kann ich nun alle Eltern-Elemente durchsuchen und da interessieren ich mich jetzt wieder die Kind-Elemente, die Child-Elemente, wovon die Selektoren, die angezeigt werden, wichtig sind. Und das sind wieder die .children("ul"), aber nur die – und jetzt haben wir einen Selektor wieder – :visible sind. Und das ist das ganze Geheimnis. Gehen wir einen Schritt, also hier von dieser Funktion, wo wir uns jetzt befinden, einen Schritt zurück, alle Eltern-Elemente. Durchsuche diese bitte und deren Kind-Elemente, dessen Objekt Nones sind und eingeschaltet sind, die sollen jetzt bitte wieder verschwinden. Und das kann man ja entweder mit .slideToggle() oder beispielsweise in dem Falle bietet sich an, weil ja wieder verschwinden müssen, die Funktion .slideUp() – und speicher ab. Dürfte soweit fertig sein. Die Konsole brauchen wir nicht mehr. Ich aktualisiere. So, mein Menü ist geschlossen. Ich klicke auf Edinburgh, das klappt. Ich klicke auf Schottland und er schließt sich. Und das ist genau der Punkt und die Vorstellung, die ich für dieses Menü gehabt habe. Ja, zusammenfassend haben wir eine komplette Website, ein Praxisprojekt bike-travel-scotland mit jQuery und einer relativ einfachen HTML-Datei durchgeführt. Tiefergehende Arbeit mit den Cascading Style Sheets in Verbindung mit dem jQuery. Und heraus kommt eine Webseite mit einem wunderschönen Grafik-Slider, mit tollen Menüeffekten, wie wir sie hier haben, plus einem komplett selbstentwickelten jQuery-Skript für solch ein Expand-Menü. Und ich denke, das liefert Ihnen eine Menge Möglichkeiten, in eigene Menüs, in eigene Objekte, in eigene Grafik-Slider zu investieren und die vorhandenen Beispiele entsprechend für Ihre Projekte anzupassen. Das Potenzial ist riesig. Ich habe versucht, in diesem Praxisworkshop Ihnen nicht detailliert jedes kleine Detail von JavaScript und jQuery und CSS und HTML aufzuzeigen und zu erklären, sondern einen Weg versucht, deutlich zu machen, mit dem Sie sich jQuery nähern können und die Vorgehensweise, wie man das am elegantesten mit einem guten Editor, wie zum Beispiel NetBeans, einem guten Entwicklungsbrowser wie beispielsweise Firefox, mit der Konsole und der jQuery.com-Entwicklungsumgebung, also der Documentation, der Plugin-Suche plus der Suche über das Web viele Möglichkeiten ermöglicht, mit jQuery zu arbeiten. Ich hoffe, das hat Ihnen Spaß gemacht und Sie sind genauso begeistert wie ich über dieses ja doch sehr schnell erstellte Beispiel und ohne großartig und viele Sourcecode- Zeilen schreiben zu müssen, haben wir hier ein wirklich aussagekräftiges und sehr schönes Beispiel auch geschaffen. In diesem Sinne darf ich mich verabschieden.

jQuery für Webdesigner

Sehen Sie, wie sich schnell und einfach eine jQuery-Entwicklungsumgebung einrichten und ein eigener Webserver installieren lässt, um danach Ihre Website durch jQuery aufzuwerten.

2 Std. 54 min (23 Videos)
Vielen Herzlichen Dank!
Anonym

Sehr geehrter Herr Rüttger, eine gelungene, effiziente und ausgezeichnete Schulung!! Ein großes Dankeschön! Mit freundlichen Grüßen, Hülya Yaman

Super Einstieg
Anonym

Das Training war interessant und sehr hilfreich und klar verständlich. Vielen Dank und bitte mehr.

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!