---
title: "JavsScript-Reitermenü"
url: "https://www.typo3.net/d/60491-javsscript-reitermenue"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2007-04-03"
last_reply: "2007-04-03"
replies: 1
solved: false
page: 1
pages: 1
lang: "de"
---

# JavsScript-Reitermenü

TYPO3 › Menüs · 1 Antwort · gestartet 2007-04-03

## Eröffnungsbeitrag

**johanness** · 2007-04-03 · [Beitrag #1](https://www.typo3.net/d/60491-javsscript-reitermenue/1)

Hallo,

im Folgenden wird beschrieben, wie man mit Typo3 ein Reitermenü einbauen kann. **Features:**
- Keine Suchmaschineneinschränkung
- Inhalt wird auch bei abgeschaltetem JavaScript gezeigt
- Nichts wird nachgeladen
- Komplett über CSS zu stylen
- Fertiges JavaScript kostenlos auch in kommerzielle Projekte einsetzbar

**Nachteile:**
Der Redakteur braucht ein HTML-ContentElement, um zu bestimmen, wo das Reitermenü beginnt und wo es aufhört (das kann auch über das Contentlement "Datensatz" geschehen!).

Das Reitermenü basiert auf dem unter MIT Lizenz stehenden [Tabbermenü](http://www.barelyfitz.com/projects/tabber/)von Patrick Fitzgerald. Eine Beschreibung zum JavaScript findet ihr auf diesem Link.

**Step 1:**
Um das Reitermenü in Typo3 einzubauen brauchen wir einen zusätzlichen Rahmen, das mit das JavaScript das Contentlement als Eintrag erkennt.
Im Setup:

```typoscript
tt_content.stdWrap.innerWrap.cObject.1.value = <div class="tabbertab">|</div>
```

Im Seiten-TSConfig der Rootseite:

```typoscript
TCEFORM.tt_content.section_frame.altLabels.1 = Tabbermenü Eintrag
```

**Step 2:**
Optional kann der Reitermenü-Eintragstext automatisch aus der Überschrift des Contentelements ausgelesen werden. Das klappt bei derzeitigem JS-Code nur, wenn die Überschrift über den Headline-Tag gewrapt wird.
Im Setup:

```typoscript
lib.stdheader.10.1.fontTag = <h3>|</h3>
```

Im Seiten-TSConfig der Rootseite:

```typoscript
TCEFORM.tt_content.header_layout.altLabels.1 = Tabbermenü Headline
```

**Step 3:**
Legt zwei (bei Bedarf als per Datensatz reinholbare, also wiederverwendbare) Contentelemente vom Typ "HTML" an.
Das erste mit der versteckten Überschrift "Tabbermenü Start" und dem Inhalt:

```html
<div class="tabber">
```

Das zweite mit der versteckten Überschrift "Tabbermenü Ende" und dem Inhalt:

```html
</div>
```

**Step 4:**
Bindet das [JavaScript](http://www.barelyfitz.com/projects/tabber/tabber.js)und ein CSS-file mit ein.
Im Setup:

```typoscript
page = PAGE
page.stylesheet = fileadmin/resources/stylesheet.css
page.headerData.10 = TEXT
page.headerData.10.value = <script type="text/javascript" src="fileadmin/resources/tabber.js"></script>
```

Mögliches CSS-File:

```html
/* tabber
----------------------------------------------- */


/* $Id: example.css,v 1.3 2006/03/06 06:02:28 pat Exp $ */
/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide { display:none; }

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {}
.tabberlive {  margin-top: 1.5em;}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav{
	margin:0;
	/* padding: 3px 0; */
	padding: 3px 0 5px 0;
	border-bottom: 1px solid #ccc;
	font: 11px "Trebuchet MS", "Tahoma", "Helvetica", "Arial", sans-serif;
}

ul.tabbernav li {
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 1.0em;
	display: inline;
	}

ul.tabbernav li a {
	padding: 3px 0.5em;
	margin-right: 3px;
	border: 1px solid #999;
	border-bottom: none;
	background: #D4D8E0;
	text-decoration: none;
	}

ul.tabbernav li a:link { color: #333; }
ul.tabbernav li a:visited { color: #667; }

ul.tabbernav li a:hover{
	color: #fff;
	background-color: #283A63;
	text-decoration: none;
	}

ul.tabbernav li.tabberactive a{
	color: #333;
	border: 1px solid #ccc;
	border-bottom: none;
	background-color: #f5f5f5;
	border-bottom: 1px solid #f5f5f5;
	cursor: default;
	}

ul.tabbernav li.tabberactive a:hover{
	color: #000;
	background-color: #f5f5f5;
	xborder-bottom: 1px solid white;
}



/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding: 8px;
 font-size: 0.9em;
 border:1px solid #ccc;
 background-color: #f5f5f5;
 border-top:0;
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}

/* If desired, set a height and add a scrollbar */
.tabberlive#tab2 .tabbertab{
 height:200px;
 overflow:auto;
}

.tabberlive .tabbertab h3 {
	padding: 0;
	margin: 0;
	font-size: 11px;
	font-weight: bold;
	color: #283A63;
	}


#sidebar .tabberlive .tabbertab ul{
	padding-left: 0;
	}
#sidebar .tabberlive .tabbertab ul li{
	line-height: 1.2em;
	border-bottom: 1px solid #ddd;
	padding: 0.3em 0;
	}
```

**Step 5:** Einbinden des Menüs auf der Seite
Fügt auf einer Seite das Element "Tabbermenü Start" und "Tabbermenü Ende" ein. Alle dazwischen liegenden Inhaltselemente mit dem Rahmen "Tabbermenü Eintrag" bekommen automatisch einen Eintrag im Tabbermenü (Mehrere Inhaltselemente können als Datensatzsammlung in einem Reiter untergebracht werden).

**To-Do:**
Das vorgefertige JavaScript könnte noch einiges mehr, was ich aber selbst noch nicht versucht habe. Dieses Tutorial beschreibt also nur einen Ansatz, wie man sich mit Hilfe dieses JS-Codes ein induviduelles Reitermenü bauen kann. *Verbesserungsvorschläge und Erweiterungen erwünscht!*

## Antworten

### [#2](https://www.typo3.net/d/60491-javsscript-reitermenue/2) · johanness · 2007-04-03

**An die Moderatoren:**
Ich bin mir nicht sicher, ob der bestreffende Moderator mein Thema hierher an den richtigen Ort geschoben hat. Es ist zwar im Grunde eine Art Menü, da der Inhalt strukturiert wird. Aber es ist ein völlig anderer Ansatz, als bei klassischen Menüs, so dass ich selbst nicht auf die Idee käme hier zu suchen - auch wenn ich das Thema mit "...menü" betitelt habe.

*Ich würde eher bei Extensions suchen. Aber ich habe ja keine Extension. Ich könnte mir am besten eine neue Rubrik "TypoScript > ContentRendering" oder so ähnlich vorstellen! Da könnten dann gleich all die Fragen geklärt werden, die am Schluss doch wieder nur mit tt_content zu tun haben.*

---

Quelle: „JavsScript-Reitermenü“, typo3.net, https://www.typo3.net/d/60491-javsscript-reitermenue
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.