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

  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. parameter.field = uid
  16.  
  17. ATagParams.cObject = COA
  18. ATagParams.cObject {
  19.  
  20. 10.file = GIFBUILDER
  21. 10.file {
  22. XY = [10.w]+[20.w]+10,70
  23. transparentColor = #ffffff
  24. 10 = TEXT
  25. 10 {
  26. text.field = subtitle//title
  27. fontSize = 14
  28. fontFile=fileadmin/fonts/DINPro-Bold.otf
  29. offset = 5,20
  30. fontColor = #787879
  31. }
  32.  
  33. 20 = BOX
  34. 20.dimensions = 0,30,[10.w]+[20.w]+10,30
  35. 20.color = #e53827
  36.  
  37. 30 = TEXT
  38. 30 < .10
  39. 30 {
  40. offset = 5,50
  41. fontColor = #ffffff
  42. }
  43. }
  44. 10.stdWrap.dataWrap = style="width:{TSFE:lastImgResourceInfo|0}px; background-image: url('/|');"
  45. }
  46. }
  47. }
  48. }
  49. }
  50. }
  51.  
  52.  
  53.  
  54. ### CSS ###
  55.  
  56. ul#navi {list-style: none;}
  57. ul#navi li {float: left;}
  58. ul#navi li a {background-repeat:no-repeat; display:block; overflow:hidden;text-indent: 999em; white-space:nowrap; height:30px;}
  59. 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.