|
Unter „Konzept und praktische Anwendung“ steht, wie Du Dein eigenes TabMenü erstellst; Code-Beispiele liegen unter „Tabs oben“. Darin wird Dir auch gezeigt, wie Du Dein Menü auf den dazu gehörenden Seiten einbinden kannst.
In diesem Kapitel werden die Feineinstellungen dazu beschrieben, wie der Schatten, die Rotation, die Anpassung der Breite Deines Menüs sowie seine Ausrichtung und die Konfiguration des inneren und äußeren Abstands zum Menürahmen.
Schatten und Rotation
Der Parameter
Shadow = On
schaltet den Schatten an, wohingegen
Shadow = Off
den Schatten ausschaltet. Siehe auch unter Hack: Im aktiven Tab unten einen Schatten erzeugen.
Der Parameter
Rotate = 0
schaltet die Rotation aus. Positive Werte lassen Dein Menü nach rechts kippen; nagative Werte kippen es links herum.
Hier ein Beispielcode...
<!-- BEGIN TABS --> {{Benutzer:DeinBenutzername/MyTabMenu | Position=Top | Tab2=Active | BgColor=FFFFFF | Rotate=-3 | Shadow=On }}
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}
...der die folgende Ausgabe erzeugt:
Menübreite, Ausrichtung und Abstand zum Rand
Die Breite des Menüs festlegen (FrameWidth)
Der Parameter
FrameWidth = 25%
erzeugt ein Tabmenü mit einer Breite von 25% des zur Verfügung stehenden Platzes auf dem Bildschirm.
Der folgende Code...
<!-- BEGIN TABS --> {{Benutzer:MaxMustermann/MyTabMenu | Position=Top | Tab2=Active | BgColor=FFFFFF | Shadow=On | FrameWidth=25% | FrameAlign=center | Margin=0px | Padding=0px | Move=0px, 0 }}
Das ist ein Test.
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text...
...der in diesem Beispiel ein vorgefertigtes TabMenü vor einem großen Textblock einbindet, erzeugt je nach angepaßtem Parameter die folgenden Ausgaben:
Das Menü innerhalb Deiner Seite rechts platzieren (FrameAlign = right)
Ändert man im obigen Codebeispiel den Parameter
FrameAlign = right
so bindet sich das Menü auf diese Weise in die Ausgabe ein:
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Das Menü innerhalb Deiner Seite zentriert platzieren (FrameAlign = center)
Beläßt man im obigen Codebeispiel den Parameter
FrameAlign = center
so bindet sich das Menü auf diese Weise in die Ausgabe ein:
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Der Text wird hier nicht einfach unterbrochen, sondern nach unten verschoben. Anders ist das auch nicht sinnvoll, denn ein Fließtext sollte nicht Zeile für Zeile vor dem Menü beginnen und erst danach weitergehen. Sinnvoll ist das nur, wenn man die Textblöcke separat definiert, die über, vor, hinter und unter dem Menü stehen sollen...
Text darüber: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
| Text links: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
|
| Text rechts: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
|
Text darunter: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
... wie unter „Zentriertes Menü umgeben von Text“ beschrieben.
Das Menü innerhalb Deiner Seite links platzieren (FrameAlign = left)
Ändert man im obigen Codebeispiel den Parameter
FrameAlign = left
so bindet sich das Menü auf diese Weise in die Ausgabe ein:
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Den inneren Abstand zum Menürand festlegen (Padding)
Ändert man im obigen Codebeispiel den Parameter
Padding = 28px
so wird die folgende Ausgabe erzeugt:
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Der Text innerhalb des TabMenüs hielt vorher einen Mindestabstand zum Rand von ca. einer Standardzeichenbreite (links und rechts) bzw. einer Leerzeile (oben und unten). Nun sind dazu noch einmal 28 Pixeln Abstand dazugekommen. Will man links und rechts den zusätzlichen Abstand auf 10 Pixel setzen, oben und unten aber keinen Abstand hinzufügen, so läßt sich dies wie folgt formulieren...
Padding = 0 10px 0 10px (im Uhrzeigersinn oben, rechts, unten, links)
...was die folgende Ausgabe erzeugt:
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Den äußeren Abstand zum Menürand festlegen (Margin)
Ändert man im obigen Codebeispiel den Parameter
Margin = 28px
so wird die folgende Ausgabe erzeugt:
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Im Unterschied zum Parameter Padding ändert sich hier der Abstand zur Umgebung des TabMenüs um 28 Pixel. Sollen rechts und unten 10 Pixel gesetzt werden, ohne jedoch links und oben einen Abstand hinzuzufügen, so läßt sich dies wie folgt formulieren...
Margin = 0 10px 10px 0 (im Uhrzeigersinn oben, rechts, unten, links)
...was die folgende Ausgabe erzeugt:
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Das Menü in seiner Position verschieben (Move und Margin)
Der Parameter Move aus dem obigen Codebeispiel hebt das Menü aus seinen Angeln und verschiebt es auf dem Bildschirm...
Move = 35px -42px
...was die folgende Ausgabe erzeugt (35 Bildpunkte nach rechts und 42 nach oben):
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Der Parameter Margin aus dem obigen Codebeispiel akzeptiert auch negative Werte und kann damit das Menü in seiner Position verschieben und auch den Abstand zur Umgebung anpassen...
Margin = -55px 10px -10px 5px (im Uhrzeigersinn oben, rechts, unten, links)
...was die folgende Ausgabe erzeugt:
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
|
Vorlage1 (als MyTabMenu01; aussen) und Vorlage2 (als MyTabMenu02; innen) wurden hier auf die oben gezeigte Weise eingebunden.
|
|
|
|
| 
