Advanced Search

accessible GTMenu

/ Published in: TYPO3
Save to your folder(s)
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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. ### TypoScript ###
  2.  
  3. lib.gtmenu = HMENU
  4. lib.gtmenu {
  5.   1 = TMENU
  6.   1 {
  7.     wrap = <ul id="navi">|</ul>
  8.     NO.doNotLinkIt = 1
  9.     NO.wrapItemAndSub = <li>|</li>
  10.     NO.stdWrap.cObject = COA
  11.     NO.stdWrap.cObject {
  12.       10 = TEXT
  13.       10 {
  14.         field = title
  15.           typolink {
  16.           parameter.field = uid
  17.  
  18.           ATagParams.cObject = COA
  19.           ATagParams.cObject {
  20.  
  21.             10 = IMG_RESOURCE
  22.             10.file = GIFBUILDER
  23.             10.file {
  24.               XY = [10.w]+[20.w]+10,70
  25.               transparentColor = #ffffff
  26.               10 = TEXT
  27.               10 {
  28.                 text.field = subtitle//title
  29.                 fontSize = 14
  30.                 fontFile=fileadmin/fonts/DINPro-Bold.otf
  31.                 offset = 5,20
  32.                 fontColor = #787879
  33.                 }
  34.  
  35.               20 = BOX
  36.               20.dimensions = 0,30,[10.w]+[20.w]+10,30
  37.               20.color = #e53827
  38.  
  39.               30 = TEXT
  40.               30 < .10
  41.               30 {
  42.                 offset = 5,50
  43.                 fontColor = #ffffff
  44.                 }
  45.               }
  46.               10.stdWrap.dataWrap = style="width:{TSFE:lastImgResourceInfo|0}px; background-image: url('/|');"
  47.             }
  48.           }
  49.         }
  50.       }
  51.     }
  52.   }
  53.  
  54.  
  55.  
  56. ### CSS ###
  57.  
  58. ul#navi {list-style: none;}
  59. ul#navi li {float: left;}
  60. ul#navi li a {background-repeat:no-repeat; display:block; overflow:hidden;text-indent: 999em; white-space:nowrap; height:30px;}
  61. ul#navi li a:hover, ul#navi li.current a,ul#navi li.over a {background-position:0px -30px;}

URL: http://www.gtmenu.de

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.