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

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 07: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

First name: *
Last name:
E-mail:
Enter the code:

*

Content: *