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