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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.ui-tabs-nav { margin-bottom:37px; margin-left:25px; } .ui-tabs-nav a { font-size:1.2em; } .ui-tabs-nav a:hover { text-decoration:none; } .ui-state-default { float:left; display:inline; margin-right:5px; padding:8px 12px; background-color:#f5f5f5; border-top:1px solid #d6d6d6; border-right:1px solid #d6d6d6; border-left:1px solid #d6d6d6; border-collapse:collapse; } .ui-state-active { padding:8px 12px; background-color:#fff; border-top:2px solid #f26101; border-collapse:collapse; } .ui-tabs-panel { padding:15px; border:1px solid #d6d6d6; border-collapse:collapse; } |
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:
|
1 2 3 4 5 6 7 8 9 |
<?php $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery-ui-tabs/jquery-ui-tabs.js|static'; $GLOBALS['TL_JAVASCRIPT'][] = 'assets/jquery-ui-tabs/core.js|static'; ?> <script> (function($) { $('section.ce_tabs').tabs({show: 'fade', hide: 'fade'}); })(jQuery); </script> |
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.