advanced code snippet search

Posted By

medienagent on 04/21/08


Tagged

menu typoscript tmenu gmenu


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

ascarion
rob-ot
cilli


accessible GTMenu

 / Published in: TYPO3
 

URL: http://www.gtmenu.de

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 IMGRESOURCE into the ATagParams by making this a cObject. Check out the podcast on typo3.org: http://castor.t3o.punkt.de/files/TnTttmenu.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 
  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;}

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: corneliusilli on November 8, 2008

Is there a possibility to include the distributeX-functionality, which is normally necessary for most of the designs?? Otherwise it would only make sense for vertical aligned menus. Regards, Cornelius

Posted By: medienagent on February 5, 2009

@corneliusilli It always makes sense to use this menu instead of a GMENU. See it in action in combination with suckerfish here: http://www.corteco.com/ distributex is a GMENU property and will not work on TMENUs - however - since these are all regular

  • - items you may style and distribute them horizontally using CSS

    • Posted By: mostwanted on May 10, 2009

    is there an alternative to distibuteX-functionality for this menu? i mean an automatic solution that works as well as the distirbuteX-functionality...

    ...CSS is not an option i think because it requires modification of the stylesheet every time the list-items change...

    You need to login to post a comment.