Revision: 6004
Updated Code
at September 10, 2008 08:38 by medienagent
Updated Code
### TypoScript ###
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('/|');"
}
}
}
}
}
}
### 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;}
Revision: 6003
Updated Code
at July 25, 2008 12:01 by medienagent
Updated Code
### TypoScript ###
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; backgroundimage: url('/|');"
}
}
}
}
}
}
### 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;}
Revision: 6002
Updated Code
at July 25, 2008 12:00 by medienagent
Updated Code
### TypoScript ###
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; backgroundimage: url('/|');"
}
}
}
}
}
}
### 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;}
Revision: 6001
Updated Code
at July 25, 2008 12:00 by medienagent
Updated Code
### TypoScript ###
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; backgroundimage: url('/|');"
}
}
}
}
}
}
### 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;}
Revision: 6000
Updated Code
at July 25, 2008 11:59 by medienagent
Updated Code
### TypoScript ###
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; backgroundimage:
url('/|');"
}
}
}
}
}
}
### 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;}
Revision: 5999
Updated Code
at April 21, 2008 05:19 by medienagent
Updated Code
#############################
# subpart temp.nav_mainUDM
#############################
#
temp.menu1 = HMENU
temp.menu1 {
entryLevel = 0
1 = TMENU
1 {
expAll = 1
wrap = <ul id="nav">|</ul>
NO = 1
NO.doNotLinkIt = 1
NO.wrapItemAndSub = <li>|</li>
NO.stdWrap.cObject = COA
NO.stdWrap.cObject{
10 = TEXT
10 {
field = subtitle//title
typolink {
parameter.field = uid
ATagParams.cObject = COA
ATagParams.cObject {
20 = IMG_RESOURCE
#10 = IMAGE
20.file = GIFBUILDER
20.file {
XY = [10.w]+[20.w]+10,70
transparentColor = #ffffff
#backColor = #ffffff
20 = TEXT
20 {
text.field = title
text.case = upper
fontSize = 14
fontFile=fileadmin/fonts/someFont.ttf
offset = 5,20
fontColor = #787879
niceText = 1
}
30 = BOX
30.dimensions = 0,30,[10.w]+[20.w]+10,35
30.color = #e53827
40 = TEXT
40 < .20
40 {
offset = 5,50
fontColor = #ffffff
}
}
20.stdWrap.dataWrap = class="imageheader" style="width:{TSFE:lastImgResourceInfo|0}px; background-repeat:no-repeat;background-image: url('/|');"
}
}
}
}
ACT = 1
ACT < .NO
ACT {
wrapItemAndSub = <li class="current">|</li>
}
}
2 = TMENU
2 {
wrap = <ul>|</ul>
NO {
wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li>|</li>
}
CUR = 1
CUR {
wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li>|</li>
ATagParams = class="act-2ndlevel"
}
ACT = 1
ACT < .CUR
}
}
Revision: 5998
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at April 21, 2008 05:14 by medienagent
Initial Code
#############################
# subpart temp.nav_mainUDM
#############################
#
temp.menu1 = HMENU
temp.menu1 {
entryLevel = 0
1 = TMENU
1 {
expAll = 1
wrap = <ul id="navi">|</ul>
NO = 1
NO.doNotLinkIt = 1
NO.wrapItemAndSub = <li>|</li>
NO.stdWrap.cObject = COA
NO.stdWrap.cObject{
10 = TEXT
10 {
field = subtitle//title
typolink {
parameter.field = uid
ATagParams.cObject = COA
ATagParams.cObject {
20 = IMG_RESOURCE
#10 = IMAGE
20.file = GIFBUILDER
20.file {
XY = [10.w]+[20.w]+10,70
transparentColor = #ffffff
#backColor = #ffffff
20 = TEXT
20 {
text.field = title
text.case = upper
fontSize = 14
fontFile=fileadmin/fonts/DINPro-Bold.otf
offset = 5,20
fontColor = #787879
niceText = 1
}
30 = BOX
30.dimensions = 0,30,[10.w]+[20.w]+10,35
30.color = #e53827
40 = TEXT
40 < .20
40 {
offset = 5,50
fontColor = #ffffff
}
}
20.stdWrap.dataWrap = class="imageheader" style="width:{TSFE:lastImgResourceInfo|0}px; background-repeat:no-repeat;background-image: url('/|');"
}
}
}
}
ACT = 1
ACT < .NO
ACT {
wrapItemAndSub = <li class="current">|</li>
}
}
2 = TMENU
2 {
wrap = <ul>|</ul>
NO {
wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li>|</li>
}
CUR = 1
CUR {
wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li>|</li>
ATagParams = class="aktiverPunkt_2te_ebene"
}
ACT = 1
ACT < .CUR
}
}
Initial URL
http://www.gtmenu.de
Initial Description
Using this TypoScript, you can build an accessible GTMenu which may fully be styled using CSS. We propose using this instead of ANY GMENU which creates ugly code.
It renders a simple TMENU, and wraps an IMG_RESOURCE into the ATagParams by making this a cObject. Check out the podcast on typo3.org: http://castor.t3o.punkt.de/files/TnT_ttmenu.m4v
Please note: in order to use {TSFE:lastImgResourceInfo|0} (which reads the width of the last image generated by the gifbuilder) you need TYPO3 4.1
Initial Title
accessible GTMenu
Initial Tags
Initial Language
TYPO3