Posted By

medienagent on 04/21/08

Tagged

Versions (?)

Last Edited at 04/21/08 05:14am

Statistics

Viewed 445 times

Favorited by 1 user(s)

Related snippets

accessible GTMenu

/ Published in: TYPO3

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

Highlighted TextExpand

### 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;}

URL: http://www.gtmenu.de

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.