advanced code snippet search

We Recommend

Building Websites with TYPO3 Building Websites with TYPO3
Follow a clear path through the power and complexity of TYPO3 to get started, and build your own TYPO3 website This book is a fast paced tutorial to creating a website using TYPO3. If you have never used TYPO3, or even any web content management system before, then you need not look further than this book as it walks you through each step to create your own TYPO3 site.

Posted By

medienagent on 04/21/08


Tagged

menu typoscript tmenu gmenu


Versions (?)


Who likes this?

2 people have marked this snippet as a favorite

ascarion
rob-ot


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

Embed | Plain TextExpand 
  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.