Start » Blog

Accordion Menus nun rahmenlos und mit Pfeilen

Accordion Menus sind wichtiger Bestandteil der Navigation in der Georgienseite. Diese Menus sind nun an Layout der Georgienseite angepasst.

Thomas Berscheid
⌨ 08.06.2016 um 17:06:00

Die Georgienseite ist auch nach dem Relaunch in der vergangenen Woche mit der Umstellung auf TYPO3 LTS Version 7 nicht ganz fertig. Das ist mit einer Webseite so wie mit einem Haus: Richtig fertig wird man nie. Und am eigenen 50 Jahre alten Haus renovieren wir seit 2 Jahren herum, dabei sind die größten Brocken geschafft.

Auf der Georgienseite will ich auch keine großen Brocken mehr haben. Das gilt in erster Linie für das Layout.

Dazu gibt es zwei Entwicklungen. Für ein externes Projekt habe ich zu Beginn des Jahres in eine Webseite Pfeile eingebaut. Nach kurzer Suche fand in Internet eines dieser Helferlein, mit denen man sich Pfeile für das Frontend designen kann. Man lässt die Pfeile komplett durch das CSS zeichnen. Der Vorteil der Sache: Es gibt keine Bilder mehr, die vom Server geladen werden müssen. Es ist keine Bibliothek notwendig, HTML5 reicht komplett aus. Wenn man den angelieferten Code anpassen will, hat man alle Möglichkeiten dazu.

Und diese habe ich genutzt. Die Pfeile habe ich nun in der Navigation in die IFSUB / ACTIFSUB Zustände der Navigation eingebaut. Also wenn es in einer Ebene noch Punkte in der folgenden Ebene gibt. Ich habe mehrere Varianten durchprobiert und die genommen, die meinem Geschmack nach am besten passt.

Ein weiterer Punkt waren die Accordions. Mit der Umstellung auf die responsive Version der Georgienseite sind die aufklappenden Menus im Inhaltsbereich der Seite wichtiger geworden. Denn früher klappte auf der linken Seite die folgende Navigation einer Seite auf, heute klappt diese herunter. Und um dem User eine möglichst unkomplizierte Navigation bereitzustellen, habe ich diese Accordions in jeder Menge Seiten eingebaut.

Mit dem Layout war ich nicht ganz zufrieden. Nun bin ich es. Die Rahmen sind verschwunden, es gibt im aktiven Menu den als Standard von mir definierten Farbverlauf der Boxen auf der rechten Seite und die aktive Box weist mit einem Pfeil in den Inhalt, mittig mit Überschrift und Inhalt

Zur Navigation gibt es noch mehr zu sagen, und das wird die Freunde von Bootstrap nicht freuen. Mehr dazu später in dieser Woche.
Kategorie ‣
Frontend
^