VF DSL 468x60

Tabsmenu (TMENU) Sample

Submitting your vote...
Rating: 5.0 of 5. 9 vote(s).
Click the rating bar to rate this item.

This snippet creates a tab menu using a TMENU. The following images are used:

TYPO3Wizard.com sample Tabs Menu (TMEN) image left 1TYPO3Wizard.com sample Tabs Menu (TMENU) image right 1TYPO3Wizard.com sample Tabs Menu (TMENU) image center 1TYPO3Wizard.com sample Tabs Menu (TMENU) image center 1TYPO3Wizard.com sample Tabs Menu (TMENU) image left 2TYPO3Wizard.com sample Tabs Menu (TMENU) image right 2TYPO3Wizard.com sample Tabs Menu (TMENU) image center leftTYPO3Wizard.com sample Tabs Menu (TMENU) image center right

 

Constants:

 

lib.tabsmenu {
  imagePath = fileadmin/templates/tabs_images/
  leftImgNO = l1.gif
  rightImgNO = r1.gif
  centerImgNO = c1.gif
  leftImgACT = l2.gif
  rightImgACT = r2.gif
  centerLeftImgACT = c2l.gif
  centerRightImgACT = c2r.gif
}

 

Setup:

 

lib.tabsmenu = COA
lib.tabsmenu {
  wrap = <div id="tabsmenu">|</div>
  10 = HMENU
  10.1 = TMENU
  10.1 {
    NO {
      			# Enabled if this menuitem is LEFT of the active menuitem
      before.cObject = IMAGE
      before.cObject.file = {$lib.tabsmenu.imagePath}{$lib.tabsmenu.leftImgNO} || {$lib.tabsmenu.imagePath}{$lib.tabsmenu.centerImgNO}
      before.cObject.wrap = <div class="img">|</div>
      before.cObject.if.isTrue.data = register:curUid
      before.cObject.if.negate = 1
       
      			# Enabled if this menuitem is RIGHT of the active menuitem
      after.cObject = IMAGE
      after.cObject.file = {$lib.tabsmenu.imagePath}{$lib.tabsmenu.centerImgNO} |*||*| {$lib.tabsmenu.imagePath}{$lib.tabsmenu.rightImgNO}
      after.cObject.wrap = <div class="img">|</div>
      after.cObject.if.isTrue.data = register:curUid
      linkWrap = <div class="item">|</div>
      allWrap = |
    }
    ACT < .NO
    ACT = 1
    ACT {
      before.cObject.file = {$lib.tabsmenu.imagePath}{$lib.tabsmenu.leftImgACT} || {$lib.tabsmenu.imagePath}{$lib.tabsmenu.centerLeftImgACT}
      before.cObject.if >
      after.cObject.file =  {$lib.tabsmenu.imagePath}{$lib.tabsmenu.centerRightImgACT} |*||*| {$lib.tabsmenu.imagePath}{$lib.tabsmenu.rightImgACT}
      after.cObject.if >
      linkWrap = <div class="item2">|</div>
      stdWrap.cObject = COA
      stdWrap.cObject {
        10 = TEXT
        10.field = title
        20 = LOAD_REGISTER
        20.curUid= 1
      }
    }
  }
  	# This part adds the closing image, which will be missing in cases where there's no active menuitem 
  20 = IMAGE
  20.file = {$lib.tabsmenu.imagePath}{$lib.tabsmenu.rightImgNO}
  20.wrap = <div class="img">|</div>
  20.if.isTrue.data = register:curUid
  20.if.negate = 1
}



// --- CSS STYLES start ----------------------
page.CSS_inlineStyle (
	#tabsmenu {background: #9F0030;height:28px;padding:20px 0px 0px 0px;}
	html > #tabsmenu {height:48px;}
	#tabsmenu .img,#tabsmenu .item,#tabsmenu .item2 {float: left;}
	#tabsmenu .item {background:#810027;}
	#tabsmenu .item2 {background:#FFFFFF;}
	#tabsmenu .item A,#tabsmenu .item2 A {padding: 0px 10px;line-height:28px; font-family: Verdana;font-weight:bold;font-size: .8em;text-decoration:none;}
	#tabsmenu .item A {color: #FFFFFF;}
	#tabsmenu .item2 A {color: #000000;}
	#tabsmenu .item A:hover,#tabsmenu2 .item A:hover {text-decoration:underline;}
)
// --- CCS STYLES end ------------------------

 

Click here to see the menu

 

This snippet menu was submitted by Peter Klein



Comments


Trine, 21-10-09 05:55:
how do you get this to work?

I have added setup text - added constants text - inserted images into a the correct directory ???

Add comment

* - required field

*



*
*

Top 10 Updates

Creating a simple Infocenter using TYPO3 geändert am  17-Nov-2009 11:12:52
Making the Section Menu work correctly with TemplaVoila geändert am  05-May-2009 10:27:17
Show pages with type "Not in Menu" in a sitemap geändert am  05-May-2009 10:11:17
Implementation of the DHTML menu from brainjar.com  geändert am  01-Feb-2009 13:02:48
Sample DHTML menu geändert am  01-Feb-2009 12:51:25
A introduction to the CONTENT object geändert am  26-Jan-2009 12:20:39
Sample for dynamic image masks geändert am  16-Dec-2008 15:42:32
Useful Links geändert am  11-Dec-2008 10:06:17
Using Transparent PNG's in IE5/6 without JavaScript geändert am  04-Oct-2008 12:27:15
Using lightbox without extension geändert am  13-Jun-2008 14:20:51

Latest comments

23-Feb-2010 04:40:25
Janna schrieb: what about the css? I am still not clear how to link typoscript with the css. Kindly...
Text menu
05-Feb-2010 18:38:50
Martin Terber schrieb: Didn't work for me neither. I will try in TMENU now.
Alternativ sorting for menu items
27-Jan-2010 23:41:31
romx schrieb: U know its dob't work apply to Tmenu))
Alternativ sorting for menu items
Deutsch
Search: