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ü 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:
tt_content.stdWrap.innerWrap.cObject.1.value = <div class="tabbertab">|</div>
Im Seiten-TSConfig der Rootseite:
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:
lib.stdheader.10.1.fontTag = <h3>|</h3>
Im Seiten-TSConfig der Rootseite:
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:
<div class="tabber">
Das zweite mit der versteckten Überschrift "Tabbermenü Ende" und dem Inhalt:
</div>
Step 4:
Bindet das JavaScriptund ein CSS-file mit ein.
Im Setup:
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:
/* 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!