Contao 3 Grundkurs

Die Quicknavigation optimieren

Testen Sie unsere 1961 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Quicknavigation wird dahingehend optimiert, dass sie unmittelbar nach Auswahl einer Seite zu dieser wechselt. Den "Los"-Button blenden Sie für den Fall aus, dass JavaScript verfügbar ist.
03:24

Transkript

Ich habe in der Zwischenzeit unser responsive-767 Stylesheet etwas überarbeitet. Die Liste ist etwas länger geworden. Das ist der zweite Teil. Und dies, der dritte Teil. Im Front-End ergibt sich dadurch jetzt folgendes Bild. Das Ganze sieht schon etwas mehr nach einer responsive Seite aus. Im Wesentlichen habe ich da Abstände korrigiert, die Schriftgröße hier vergrößert, damit man mit dem Finger gut drauf kommt. Und im Grunde haben wir jetzt noch eine Baustelle, das ist die Quicknavigation selbst. Unschön ist nämlich, dass man erst ein Menücode auswählen muss und dann auf los klickt, um die Seite zu wechseln. Dieses "Los" wollen wir loswerden. Dafür passen wir jetzt das Template der Quicknavigation an. Das machen wir unter Templates. Wir erstellen erstmal einen neuen Ordner. Den nennen wir reLAIX, wie unser Projekt. Speichern und Schließen Anschließend müssen wir im Theme definieren, dass dieser Ordner als Templates-Ordner überhaupt genutzt werden soll. Haben wir hiermit getan. und jetzt können wir ein neues Template erstellen. Wir suchen in den Original-Templates nach quicknav. Das ist diese hier. Und wählen als Verzeichnis: reLAIX Template erstellen Und wir haben das jetzt hier als Kopie zu Verfügung. Das können wir hier editieren. Zwei Dinge wollen wir hier machen: Einmal das Select-Menü um ein Attribut erweitern. Nämlich um das Attribut unchange. Das Zweite, was wir machen: Wir wollen den Los-Button verstecken. Der befindet sich hier. Und da setzen wir ein noscript davor. Und dahinter noscript Ende. Das blendet den Button aus solange Javascript aktiv ist. Wir speichern das Template und schauen im Front-End nach, was passiert. Ah! Der Button ist weg. Und jetzt versuchen wir mal ein Menüpunkt auszuwählen. Das funktioniert auch bei on-change. Die Quicknavigation ist damit ein gangbarer Weg, um das Menüproblem zu lösen. Die Seiten sehen ordentlich aus, wir gehen mal noch eine Stufe kleiner, auch das ist in Ordnung. Natürlich ist das nicht die einzige Lösung. Es gibt zum Beispiel auch eine Javascript-basierte Lösung, die ich ganz gut finde. Auf der Seite hier gibt es auch eine Demo, so sieht die Navigation aus. Müssen wir mal resizen, zum Beispiel auf diese Größe, dann sieht das so aus oder noch kleiner, dann haben wir hier diese Menütechnik. Oder eine Lösung von Peter Müller, die völlig ohne Javascript auskommt und rein auf CSS basiert und die pseudo-klasse Targets nutzt Schauen wir uns auch mal schnell an. Im Resizer. Gehen wir gleich mal auf klein. Hier haben wir das Menü und so kann es auch gehen.

Contao 3 Grundkurs

Lernen Sie die Grundidee des Content Management Systems Contao 3 kennen und machen Sie sich mit den Möglichkeiten der Inhaltsdarstellung bis hin zum komplexen Webauftritt vertraut.

6 Std. 34 min (102 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

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!