Snippet Menu ( Click here to hide )

/ typo3wizard.com / Snippets / Menus / Tabsmenu (TMENU) Beispiel

Tabsmenu (TMENU) Beispiel

Submitting your vote...

Rating: 4.9 of 5. 10 vote(s).
Click the rating bar to rate this item.

Dieses Snippet ist ein Beispiel für ein Tabmenu, welches mit Hilfe eines TMENU realisiert wird. Folgende Bilder werden in diesem Menu verwendet:

TYPO3Wizard.com sample Tabs Menu (TMEN) image left 1

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

So sieht das Menu aus

Dieses Menu wurde von Peter Klein eingesendet.

Comments

mr, 21-03-06 14:34:

Nettes Menü ... nur bekomme ich beim aktivieten link die gif`s nicht angezeigt ... alle anderen funktionen des css sind gegeben .. mfg

Tarar, 24-05-06 21:38:

Wo soll ich NAVI.special.value = 2
in diese code geben?

archyart, 04-06-10 10:00:

Hallo möchte das TabMenu zweimal auf einer Seite benutzen. Problem ist dann allerdings das bei dem zweiten Tabmenü l1 nicht angezeigt wird wenn ich auf das erste Tabmenü anklicke. Komme nicht weiter!

TYPOSCRIPT:
marks.SYSNAV = COA
marks.SYSNAV {
10 = HMENU
10.special = list
10.special.value = 48,49,50,51,52
10.1 = TMENU
10.1 {
NO {
# Enabled if this menuitem is LEFT of the active menuitem
ATagTitle.field = title
before.cObject = IMAGE
before.cObject.file = fileadmin/toptabmenu_kapital/l1.jpg || fileadmin/toptabmenu_kapital/c1.jpg
before.cObject.wrap = <div class="img1h">|</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 = fileadmin/toptabmenu_kapital/c1.jpg |*||*| fileadmin/toptabmenu_kapital/r1.jpg
after.cObject.wrap = <div class="img1h">|</div>
after.cObject.if.isTrue.data = register:curUid
linkWrap = <div class="itemh">|</div>
allWrap = |
}

ACT < .NO
ACT = 1
ACT {
before.cObject.file = fileadmin/toptabmenu_kapital/l2.jpg || fileadmin/toptabmenu_kapital/c2l.jpg
before.cObject.if >
after.cObject.file = fileadmin/toptabmenu_kapital/c2r.jpg |*||*| fileadmin/toptabmenu_kapital/r2.jpg
after.cObject.if >
linkWrap = <div class="item2h">|</div>
stdWrap.cObject = COA
stdWrap.cObject {
10 = TEXT
10.field = subtitle
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 = fileadmin/toptabmenu_kapital/r1.jpg
20.wrap = <div class="img1h">|</div>
20.if.isTrue.data = register:curUid
20.if.negate = 1
}

marks.HORIZMENUE= COA
marks.HORIZMENUE {
10 = HMENU
10.special = list
10.special.value = 41,42,43,44,45,46
10.1 = TMENU
10.1 {
NO {
# Enabled if this menuitem is LEFT of the active menuitem
ATagTitle.field = title
before.cObject = IMAGE
before.cObject.file = fileadmin/tabmenu/l1.jpg || fileadmin/tabmenu/c1.jpg
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 = fileadmin/tabmenu/c1.jpg |*||*| fileadmin/tabmenu/r1.jpg
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 = fileadmin/tabmenu/l2.jpg || fileadmin/tabmenu/c2l.jpg
before.cObject.if >
after.cObject.file = fileadmin/tabmenu/c2r.jpg |*||*| fileadmin/tabmenu/r2.jpg
after.cObject.if >
linkWrap = <div class="item2">|</div>
stdWrap.cObject = COA
stdWrap.cObject {
10 = TEXT
10.field = subtitle
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 = fileadmin/tabmenu/r1.jpg
20.wrap = <div class="img">|</div>
20.if.isTrue.data = register:curUid
20.if.negate = 1
}

Add comment

Top 10 Updates

Login geändert am 14-Aug-2010 13:50:17
Schöne Schriften mit Google Font API geändert am 20-May-2010 16:36:59
TS basierte Searchbox für Indexed Search geändert am 18-May-2010 18:26:54
TYPO3 SEO geändert am 30-Apr-2010 09:43:20
Suchmaschinenfreundliche grafische Überschriften in TYPO3 geändert am 30-Apr-2010 09:33:56
Erstellen eines einfachen Infocenters mit TYPO3 geändert am 17-Nov-2009 12:11:22
Funktionierendes Section Menu mit TemplaVoila geändert am 05-May-2009 12:42:40
"Nicht im Menü" in Sitemap anzeigen geändert am 05-May-2009 12:12:24
Implementation des DHTML Menüs von brainjar.com geändert am 01-Feb-2009 14:01:36
Beispiel DHTML Menü geändert am 01-Feb-2009 13:47:38

Latest comments

01-Sep-2010 20:38:32 Ben Heuwing schrieb: Damit die aktuelle Seite nicht verlinkt wird, wie bei normalen Menüs den MENUITEMSTATE CUR... Klickpfad / Rootline Menu / Breadcrumb Menu
31-Aug-2010 17:16:13 Peter schrieb: Hallo Zusammen, ich hätte eine Frage: Ich würde gerne den Seitentitel der ersten Ebene oberhalb... Seitentitel von übergeordneter Seite ausgeben
26-Aug-2010 21:32:42 Mo schrieb: Aktuell:... Mehrere Domains in einer Typo3 Installation verwalten

Latest forum posts

30-Aug-2010 16:35:59 Ulf Klose schrieb: URL-Bestandteile fehlen: tt_news mit RealURL und RSS
23-Aug-2010 09:18:31 Atul Shinh schrieb: Workspace issue
13-Aug-2010 10:32:25 Uwe schrieb: Facebook

English

Unser Buch-Tipp

Artikel