Jquery Tabs in Contao

Gerade wenn eine Webseite viel Text enthält ist es wichtig, die Inhalte möglichst ansprechend anzuordnen. Neben Akkordeon-Effekten eignen sich Tabs dafür gut – im Gegensatz zum Akkorden haben sie aber den Vorteil, dass alle verfügbaren Tabs oberhalb des Inhaltes angezeigt wird; befindet sich z.B. im 1. Akkordeonelement ein großer Inhalt, verschwinden die darauffolgenden Akkordeonelemente am Ende der Seite.

Für die Neugestaltung meiner Webseite habe ich mich daher entschieden, Tabs zu verwenden. Da die Webseite auf Contao basiert, habe ich mich für die Extension „Jquery UI Tabs“ von wangaz entschieden, die Tabs als Content-Element in Contao anlegt.

Nach Einbindung der Tabs hat sich jedoch schnell heraus gestellt, dass die Optik noch stark verbesserungswürdig war. Ich habe dabei sowohl das Aussehen an sich verbessert, allerdings auch die Haptik durch Einfügen eines Animationseffektes. Aber eins nach dem anderen:

I. CSS

1. Zunächst möchte ich die Tabs nebeneinander angezeigt haben; dazu geben wir .ui-state-default float:left und display:inline

2. Der Tab-Navigation kann mit.ui-tab-nav ein eigener Look verliehen werden

3. Der aktive Tab kann mit .ui-state-active separat gestylet werden

4. Mit .ui-tabs-panel lässt sich der Inhaltsbereich stylen; das fertige .css könnte z.B. wie folgt aussehen:

 

II. Animation

Ferner wollte ich, dass die Tabs beim Umschalten eine Transition haben, also animiert sind. Dafür bin ich wie folgt vorgegangen:

1. Jquery UI im Seitenlayout eingebunden; dazu einfach jquery ui im Backend hochladen und im Seitenlayout z.B. im <head> Bereich verlinken: <script src=“files/jquery-ui.js“></script>

2. Auf Templates klicken und dort ein neues Template j_ui_tabs.html5 anlegen

3. In diesem Template kann dann ein Effekt eingefügt werden – ich habe mich für einen Überblendeffekt (fade) entschieden. Das Ganze sieht wie folgt aus:

4. Für diejenigen, denen ein Fade-Effekt zu langweilig ist, lohnt sich das Stöbern im Jquery UI Toolkit: Es gibt dort viele weitere Effekte.

Jonathan

Jurist, Freizeit-Nerd, Webdesigner und Inhaber von jst-media.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.