Hallo...
Da ich teilweise so einige Anfragen per PN erhalten, wie man das ein oder andere machen kann, und ich aber der Meinung bin, dass dadurch der Geist eines Forums untergraben wird, werde ich Lösungen zumindest auch hier posten.
*********************************************************************
####################### TMENU Variante ##########################
*********************************************************************
Es ging um ein Menü, das nur aus Bildern bestehen soll, wobei jedoch die Bilder aus einer CSS-Class kommen sollen. Diese sollen natürlich verlinkt sein und auch dann wenn das CSS-File nicht geladen wird, oder die Bilder selbst nicht geladen werden noch verwendbar sein.
Allein das ein Background verlinkt werden soll stellt mich vor ein Rätsel, denn das ist eigentlich nicht möglich.
Das die Navi noch verwendbar sein soll, wenn die Bilder nicht geladen werden halte ich jedoch für nicht möglich, da man dem Background-Imgage direkt kein alt="" mitgeben kann. Was man machen kann ist ein transparentes Bild mit in den Link packen, das dieselben Abmaße hat, wie das Hintergrundbild und dann ein alt mitgeben. Oder ein Bild mit einem niedrigeren z-index hinter das Hintergrundbild legen und dann ein alt mitgeben. Man fragt sich wohl dabei warum man nicht gleich ein Bild verlinkt und dies sogar aus dem media-Feld auslesen könnte... Das Problem bei überfahren mit der Mouse. hier soll ein Bildwechsel stattfinden. Schwierig, da es beim T-Menu kein RO gibt, sehrwohl aber ein beforeROImg. Ich fands aber zu kompliziert das damit zu machen.
Vorgabe war also ein Bildmenü aus Hintergrundbildern und kein GMENU.
Das TS-Setup:
temp {
MENU_HORIZONTAL = HMENU
MENU_HORIZONTAL {
wrap = <div class="navi-margin"><div class="navi">|</div></div>
special = directory
special.value = 1
1 = TMENU
1 {
NO = 1
NO {
stdWrap.wrap = <span class="hidden">|</span>
ATagParams {
cObject = COA
cObject {
10 = TEXT
10 {
field = keywords
wrap = class="|"
}
}
}
ATagTitle.field = description // title
}
}
}
}
Kleine Erklärung:
Die ATagParams kommen aus dem Feld keywords der jeweiligen Seite (ATagParmas.cObject) (Hinweis: Sicher nicht sehr sinnvoll, da man das Feld oft auch für die Metaangaben benötigt - Hier kann man das Feld verwenden, das man selbst nicht benötigt.
Der ATagTitle kommt aus dem Feld description, oder falls leer aus dem title-Feld. (Hinweis: s.o.)
Der eigentliche Text des Links wird durch das span mit der class="hidden" entfernt. Dadurch wird der Text wieder angezeigt, wenn das CSS nicht geladen wird.
Das CSS:
div.navi-margin { margin:0 auto; display:block; width:324px; }
div.hidden { display:none; }
.navi a { float:left; display:block; width:61px; height:58px; margin:0 10px 10px 10px; background-repeat:no-repeat; }
.navi a:hover { background-repeat:no-repeat; }
.navi a.handbuch { background:transparent url(../../fileadmin/index2/pic/handbuch_NO.png); }
.navi a.handbuch:hover { background:transparent url(../../fileadmin/index2/pic/handbuch_ACT.png); }
.navi a.AeD { background:transparent url(../../fileadmin/index2/pic/AeD_NO.png); }
.navi a.AeD:hover { background:transparent url(../../fileadmin/index2/pic/AeD_ACT.png); }
.navi a.MDE { background:transparent url(../../fileadmin/index2/pic/MDE_NO.png); }
.navi a.MDE:hover { background:transparent url(../../fileadmin/index2/pic/MDE_ACT.png); }
.navi a.info { background:transparent url(../../fileadmin/index2/pic/info_NO.png); }
.navi a.info:hover { background:transparent url(../../fileadmin/index2/pic/info_ACT.png); }
CSS für IE 6 Unterschied:
Der IE benötigt einen Conditional Comment, da die Weite für die standardweite für die Bilder nicht ausreicht.
div.navi-margin { margin:20px auto; display:block; width:340px; }
Kann zum Beipiel eingebunden werden mittels:
page {
headerData {
1 = TEXT
1 {
value (
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="fileadmin/index2/main_ie6.css" media="screen" /><![endif]-->
)
}
}
}
Wie man sieht kommen die Bilder aus dem CSS und werden durch das Pseudoelement :hover gewechselt.
Vorteile:
- Hover-Effekt funktioniert auch mit ausgeschaltetem JavaScript.
Nachteile:
- Keine alt-texte (Navigation ist ohne angezeigte Bilder nur schwer bis gar nicht möglich
- komplitierteres TypoScript
- Wesentlich mehr CSS-Code (Für jede Seite muss eine neue Class mit Pseudoclass erstellt werden. Für reine Redakteure überhaupt nicht zu handeln.
- Darstellungsunterschied im IE6 (hier ist ein Conditional Comment und ein zusätzliches CSS nötig)
*********************************************************************
####################### GMENU Variante ##########################
*********************************************************************
Meiner Meinung nach wesentlich einfacher ist es mit einem GMENU, das nur aus Bildern besteht und keinen Text ausgibt.
So sieht die GMENU-variante aus:
TS-Setup:
temp {
GMENU_HORIZONTAL = HMENU
GMENU_HORIZONTAL {
special = directory
special.value = 1
1 = GMENU
1 {
wrap = <div class="navi-margin">|</div>
NO = 1
NO {
ATagTitle.field = description // title
wrap = <div class="padding">|</div>
altImgResource {
import = uploads/media/
import {
field = media
listNum = 0
}
}
}
RO < .NO
RO {
altImgResource {
import {
listNum = 1
}
}
}
}
}
}
Kleine Erklärung dazu:
Das Menü besteht nicht mehr aus Hintergrundgrafiken, sondern aus Vordergrundgrafiken.
Mit altImgResource holt man aus Pfad uploads/media, aus den Seiteneigenschaften und dem Mediafeld die erste abgelegte Grafik (listNum = 0) Das ist das Standardbild. (Zustand NO)
Im RO-Zustand, der alle Angaben von NO kopiert, wird nun nur die listNum-Angabe ausgetauscht. Das heißt beim Bildwechsel wird nun das 2. abgelgte Bild im Mediafeld genommen. (listNum = 1)
Das CSS dazu:
div.padding { display:inline; padding:0 10px; }
div.padding img { border:none; }
div.navi-margin { margin:0 auto; display:block; width:324px; }
Vorteile:
- Einfach verständliches TypoScript
- Sehr wenig CSS-Definitionen nötig
- Hohe Browserkompatibilität
- Für Redakteuere können leicht neue Menüpunkte erstellt werden, da diese das Media-Feld in den Seiteneigenschaften befüllen können (falls erlaubt))
- Menü funktioniert auch bei ausgeschalteten Grafiken, JavaScript und nicht geladenen CSS-File (text-Browser)
Nachteile:
- Hover-Effekt (mouseOver) funktioniert nicht bei ausgeschaltetem JavaScript)
Das Ganze kann man sich hier ansehen:
http://longus.kendzorra.de/home.html