Return to Snippet

Revision: 6004
at September 10, 2008 08:38 by medienagent


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

Revision: 6003
at July 25, 2008 12:01 by medienagent


Updated Code
### 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; backgroundimage: 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;}

Revision: 6002
at July 25, 2008 12:00 by medienagent


Updated Code
### 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; backgroundimage: 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;}

Revision: 6001
at July 25, 2008 12:00 by medienagent


Updated Code
### 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; backgroundimage: 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;}

Revision: 6000
at July 25, 2008 11:59 by medienagent


Updated Code
### 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; backgroundimage:
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;}

Revision: 5999
at April 21, 2008 05:19 by medienagent


Updated Code
#############################
# subpart temp.nav_mainUDM
#############################
#

temp.menu1 = HMENU
temp.menu1 {
  entryLevel = 0
      1 = TMENU
      1 {
        expAll = 1
        wrap = <ul id="nav">|</ul>
        NO = 1
        NO.doNotLinkIt = 1
        NO.wrapItemAndSub = <li>|</li>
                       
        NO.stdWrap.cObject = COA 
        NO.stdWrap.cObject{
        
         10 = TEXT
         10 {
          field = subtitle//title
          typolink {
            parameter.field = uid
            ATagParams.cObject = COA
            ATagParams.cObject { 
        
            20 = IMG_RESOURCE
            #10 = IMAGE
        
            20.file = GIFBUILDER
            20.file {
              XY = [10.w]+[20.w]+10,70
              transparentColor = #ffffff
              #backColor = #ffffff
        
              20 = TEXT
              20 {
                  text.field = title
                  text.case = upper
                  fontSize = 14
                  fontFile=fileadmin/fonts/someFont.ttf
                  offset = 5,20
                  fontColor = #787879
                  niceText = 1
                 }
          
            30 = BOX
            30.dimensions = 0,30,[10.w]+[20.w]+10,35
            30.color = #e53827
          
            40 = TEXT
            40 < .20
            40 {
               offset = 5,50
               fontColor = #ffffff
               }
            }
          20.stdWrap.dataWrap = class="imageheader" style="width:{TSFE:lastImgResourceInfo|0}px; background-repeat:no-repeat;background-image: url('/|');"
          
    }
  }
}
        

        
        }
      
      ACT = 1
      ACT < .NO 
      ACT {
            wrapItemAndSub = <li class="current">|</li>
        }
     
      }
      
      
      2 = TMENU
    2 {
        wrap = <ul>|</ul>
        NO {
            wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li>|</li>
        }
        CUR = 1
        CUR {
            wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li>|</li>

            ATagParams = class="act-2ndlevel"
        }
        
        ACT = 1
        ACT < .CUR

    }


}

Revision: 5998
at April 21, 2008 05:14 by medienagent


Initial Code
#############################
# subpart temp.nav_mainUDM
#############################
#

temp.menu1 = HMENU
temp.menu1 {
  entryLevel = 0
      1 = TMENU
      1 {
        expAll = 1
        wrap = <ul id="navi">|</ul>
        NO = 1
        NO.doNotLinkIt = 1
        NO.wrapItemAndSub = <li>|</li>
                       
        NO.stdWrap.cObject = COA 
        NO.stdWrap.cObject{
        
         10 = TEXT
         10 {
          field = subtitle//title
          typolink {
            parameter.field = uid
            ATagParams.cObject = COA
            ATagParams.cObject { 
        
            20 = IMG_RESOURCE
            #10 = IMAGE
        
            20.file = GIFBUILDER
            20.file {
              XY = [10.w]+[20.w]+10,70
              transparentColor = #ffffff
              #backColor = #ffffff
        
              20 = TEXT
              20 {
                  text.field = title
                  text.case = upper
                  fontSize = 14
                  fontFile=fileadmin/fonts/DINPro-Bold.otf
                  offset = 5,20
                  fontColor = #787879
                  niceText = 1
                 }
          
            30 = BOX
            30.dimensions = 0,30,[10.w]+[20.w]+10,35
            30.color = #e53827
          
            40 = TEXT
            40 < .20
            40 {
               offset = 5,50
               fontColor = #ffffff
               }
            }
          20.stdWrap.dataWrap = class="imageheader" style="width:{TSFE:lastImgResourceInfo|0}px; background-repeat:no-repeat;background-image: url('/|');"
          
    }
  }
}
        

        
        }
      
      ACT = 1
      ACT < .NO 
      ACT {
            wrapItemAndSub = <li class="current">|</li>
        }
     
      }
      
      
      2 = TMENU
    2 {
        wrap = <ul>|</ul>
        NO {
            wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li>|</li>
        }
        CUR = 1
        CUR {
            wrapItemAndSub = <li>|</li> |*| <li>|</li> |*| <li>|</li>

            ATagParams = class="aktiverPunkt_2te_ebene"
        }
        
        ACT = 1
        ACT < .CUR

    }


}

Initial URL
http://www.gtmenu.de

Initial Description
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

Initial Title
accessible GTMenu

Initial Tags

                                

Initial Language
TYPO3