Hallo allerseits,
folgendes sehr tolle Script möchte ich gerne für mich verwenden.
Es ist die perfekte Ablösung für das althergebrachte GMENU, das nun wirklich hässlichen Code produziert.
Die dahinter liegende CSS Technik lautet "Image Replacement", und ist ein Verfahren, um eine bessere Qualität in der Suchmaschinenoptimierung zu erzielen, da hier auch semantisch korrekt ausgeschriebener Text für jeden Menüeintrag vorhanden ist, der einfach über CSS aus dem sichtbaren Bereich geschoben wird, so daß das dahinterliegende Hintergrundbild sichtbar bleibt. Ausserdem kommt hier auch das sogenannte "CSS Sprite" Verfahren zum Einsatz, das zudem die Ladezeit verkürzt, da alle Zustände in einem Bild liegen und durch hin und herschieben zum Vorschein gebracht werden. AUSSERDEM 😉 verzichtet es auf Javascript.
So weit des Lobes =)
Leider ist es, was Typoscript angeht, ein sehr fortgeschrittenes Level 😉
Im Grunde möchte ich das Ding mit meinen Vorlagengrafiken für NO, ACT usw. ausstatten.
So wie mit dem klassischen GMENU, bei dem ich ja einfach zb.
5 = IMAGE
5.file = bildpfad
schreibe.
Aber hier? Irgendwer eine Idee?
Danke schonmal,
Tektol
lib.gtmenu = HMENU
lib.gtmenu {
1 = TMENU
1 {
wrap = <ul id="navi">|</ul>
NO.doNotLinkIt = 1
NO.wrapItemAndSub = <li>|</li>
NO.stdWrap.cObject = COA
NO.stdWrap.cObject {
10 = TEXT
10 {
field = title
typolink {
parameter.field = uid
ATagParams.cObject = COA
ATagParams.cObject {
10 = IMG_RESOURCE
10.file = GIFBUILDER
10.file {
XY = [10.w]+[20.w]+10,70
transparentColor = #ffffff
10 = TEXT
10 {
text.field = subtitle//title
fontSize = 14
fontFile=fileadmin/fonts/DINPro-Bold.otf
offset = 5,20
fontColor = #787879
}
20 = BOX
20.dimensions = 0,30,[10.w]+[20.w]+10,30
20.color = #e53827
30 = TEXT
30 < .10
30 {
offset = 5,50
fontColor = #ffffff
}
}
10.stdWrap.dataWrap = style="width:{TSFE:lastImgResourceInfo|0}px; background-image: url('/|');"
}
}
}
}
}
}
Das dazugehörige CSS:
ul#navi {list-style: none;}
ul#navi li {float: left;}
ul#navi li a {background-repeat:no-repeat; display:block; overflow:hidden;text-indent: 999em; white-space:nowrap; height:30px;}
ul#navi li a:hover, ul#navi li.current a,ul#navi li.over a {background-position:0px -30px;}