Hallo,
ich habe einige Tage mit dem TMENU_LAYERS und GMENU_LAYERS gekämpft um folgendes Menü zu realisieren.
Ein horizontales Hauptmenu als GMENU_LAYERS, das abhängig von der Browserfensterbreite auf dem Bildschrim plaziert wird. Wenn man mit der Maus auf einen der Hauptmenüpunktegeht, soll ein Layer mit einem neuen Menü darunter eingeblendet werden. Geht man in diesem Menü auf einen der Menüpunkte soll daneben ein Layer mit einem neuen Menü eingeblendet werden... (Wie das typische kaskadierende Menü von Windows...).
Mein Problem war, dass das Hauptmenü an unterschiedlichen Positionen liegen kann, und deswegen die Layer nich absolut positioniert werden dürfen.
Es ist etwas nervig, dass ein fehlendes Zeichen oder ein falscher Eintrag das ganze Menü unbrauchbar machen kann. Aber in welcher Script-/Programmiersprach ist das nicht so.
Die Stylesheetdatei und die Designvorlage sowie die Font-Datei müssen in die enstprechenden Verzeichnisse gelegt werden. Falls die Verzeichnisse noch nicht existieren, können Sie einfach angelegt werden, oder man benutzt eigene Verzeichnisse, muss dann aber die Pfade im TS ändern.
Statt des GMENU_LAYERS funktioniert es auch mit TMENU_LAYERS für die erste Ebene (Habe ich getestet).
Wenn die Ausdrucksweise nicht überall korrekt ist, bitte nicht schimpfen, ich habe das schnell mal so hingeschrieben.
Demnächst (Ab Ende Juni, Anfang Juli) kann man das ganze auch live sehen. (Adresse gebe ich dann noch an. 🙂
Mit folgendem TS wird die Seite und das Menü erzeugt:
#########################################
#Ein Objekt vom Typ PAGE mit dem Namen page erzeugen
#########################################
page = PAGE
#########################################
#Das MetaTag-Plugin aktivieren. Es muss im Erw.-Manager installiert sein.
#Kann weggelassen werden, wenn keine Metatags verwendet werden sollen.
#########################################
page.headerData.999 < plugin.meta
#########################################
#Die DC-Metatags deaktivieren. Die sind im allgemeinen nicht nötig
#########################################
page.headerData.999.flags.DC = 0
#########################################
#Seitentyp definieren - immer nötig
#########################################
page.typeNum = 0
#########################################
#libs und stylesheets laden
#########################################
#########################################
#lib für Grafikmenü mit automatichen Layern bei Mouseover
#########################################
page.includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
#########################################
#lib für Textmenü mit automatichen Layern bei Mouseover
#########################################
page.includeLibs.tmenu_layers = media/scripts/tmenu_layers.php
#########################################
#css mit Styles für das Menü, oder mehr...
#########################################
page.stylesheet = fileadmin/stylesheets/standard.css
#########################################
#Ein Objekt vom Typ TEMPLATE mit dem Namen 10 erstellen
#########################################
page.10 = TEMPLATE
#########################################
#Einstellungen für das Template (Objekt 10) vornehmen
#########################################
page.10{
#########################################
#Den Typ des Templates als FILE definieren
#########################################
template = FILE
#########################################
#Den Dateinamen des FILES (In diesem Fall Designvorlage) angeben.
#Das File wird automatisch geladen.
#########################################
template.file = fileadmin/templates_standard/standard.html
#########################################
#In der Designvorlage muss ein Subpart DOKUMENT angegeben sein.
#Der Subpart wird mit ###DOKUMENT### geöffnet und geschlossen.
#########################################
workOnSubpart = EINE_SEITE
#########################################
#Eine Objekt vom Typ CONTENT erzeugen im mark INHALT erzeugen.
#Im Include static dieses Templates sollte mindestens content (default) eingetragen sein.
#Der mark wird mit ###INHALT### in der Designvorlage eingetragen
#ohne öffnen und schließen, der ganze mark wird ersetzt.
#########################################
marks.INHALT = CONTENT
#########################################
#Für das CONTENT-Objekt (mark.INHALT) die Tabelle mit dem Content angeben.
#In der Regel tt_content
#########################################
marks.INHALT.table = tt_content
#########################################
#Eine Objekt vom Typ HMENU im mark MENU erzeugen.
#########################################
marks.KOPF_MENU=HMENU
#########################################
#Die Eigenschaften für das MENU setzen
#########################################
marks.KOPF_MENU{
##########################################
#Gibt an ab welcher Ebene das Menü starten soll
##########################################
entryLevel = 0
##########################################
#Definiert den Menütyp der ersten Ebene Level 0
##########################################
1 = GMENU_LAYERS
##########################################
#Eigenschaften der ersten Ebene
##########################################
1{
##########################################
#Die Breite des Menüs darf 1100 Pixel nicht überschreiten.
#Alle Menüeinträge, die darüber hinaus gehen werden unterdrückt.
#Kann auch komplett abgeschaltet werden!
##########################################
#max=1100
##########################################
#Die Breite (Höhe) des breitesten (höchsten) Menüitems im Menü bestimmt die Breite (Höhe) aller Menüitems in diesem Menü
##########################################
#useLargestItemX=1
useLargestItemY=1
##########################################
#Dieser Style wird für die Mouseovermenüs verwendet
##########################################
layerStyle = position:absolute; width:150px;VISIBILITY:hidden;
##########################################
#Setzt einen vertikalen Abstand der einzublenden Layer vom Bezugspunkt
##########################################
topOffset=15
##########################################
#Setzt einen horizontalen Abstand der einzublenden Layer vom Bezugspunkt
##########################################
leftOffset=5
##########################################
#Ein weiterer x-offset des Mouseovermenüs vom Aktivierungspunkt.
##########################################
#xPosOffset =-16
##########################################
#Muss gesetzt werden, damit sich das Menü nicht mit der Maus mitbewegt.
#Für horizontale Menüs in der Regel x (so wie hier), für vertikale y.
##########################################
lockPosition = x
##########################################
#Muss aktiviert werden damit alle Menuitems der nächsten Ebene im Layer angezeigt werden.
##########################################
expAll=1
##########################################
#Wird aktiviert damit die Mouseovermenüs relativ zum Parentlayer positioniert werden.
##########################################
relativeToParentLayer=1
##########################################
#Wird aktiviert damit die Mouseovermenüs relativ zum auslösenden Item positioniert werden.
##########################################
relativeToTriggerItem=1
##########################################
#Wird aktiviert damit das Mouseovermenü beim verlassen des Layers
#mit der Maus wieder ausgeblendet wird.
##########################################
hideMenuWhenNotOver=1
##########################################
#Definiert den "NO"rmalen Zustand der Menüitems.
#Weitere Zustände sind:
#IFSUB -> Menüitems, die ein Untermenü haben
#ACT -> Menüitems, die sich im aktuellen Pfad befinden
#ACTIFSUB -> Kombination aus den beiden oberen
#CUR -> Menüitem der aktuelle ausgewählten Seite
#USR -> Seiten die beschränkte Zugriffsrechte haben
#RO -> Mouseoverstatus eines Menüitems
#SPC -> Paltzhaltermenüitems
##########################################
NO{
##########################################
#Hinterrundfarbe der Menüitems setzen
#die Option split (|*| #ccc...) wird sehr gut auf Seite 62 in Typoscript by Example erklärt
##########################################
backColor=|*| #cccccc || #eeeeee |*|
##########################################
#In der Dersignvorlage sollte eine Tabelle vorbereitet und eine <tr> göffnete sein in die dann die Menüitems
#mit ihrem wrap "<td>|</td>" eingebaut werden. so wird verihndert, dass die Menüitems durch den Eintrag
#"relativeToTriggerItem=1" weiter oben wieder untereinander gesetzt werden.
#Wird in der Typoscript Reference Seite 127 erklärt.
##########################################
wrap=<td>|</td>
##########################################
#Größe des Gif-Bildes für den MenüItem. Wird in der TS-Referenz unter GifBuilder erklärt
##########################################
XY = [10.w]+10, [10.h]+6
##########################################
#Erzeuge ein Objekt vom Typ TEXT mit dem Namen 10
##########################################
10 = TEXT
##########################################
#Definiere die Eigenschaften für das Textobjekt (10)
##########################################
10{
##########################################
#Zentriert den Text in Button
##########################################
align = center
##########################################
#Schhriftart - Das ttf-File wurde direkt in die Resourcen für dieses Template geladen
#und kann so direkt verwendet werden. Andernfalls muss der gesamte Pfad zum File
#angegeben werden.
##########################################
fontFile = fileadmin/fonts/arial.ttf
##########################################
#Schhriftgröße
##########################################
fontSize = 10
##########################################
#Schhriftfarbe
##########################################
fontColor = #ff0000
##########################################
#Gibt an welches Feld aus der Tabelle pages für den Button verwendet werden soll
##########################################
text.field=title
##########################################
#Gibt die Position des Textes in der Grafik an
##########################################
offset=0,14
}
}
##########################################
#Kopiert das "NO"rmale Menüitem-Objekt in das "RO"llover Menüitem-Objekt
##########################################
RO < .NO
##########################################
#Aktiviert den Rollovereffekt
##########################################
RO=1
##########################################
#Ergänzt die Eigenschaften des Rollover-Objektes
##########################################
RO{
backColor=#000000
10.fontColor=#ffffff
}
##########################################
#Kopiert das "NO"rmale Menüitem-Objekt in das "ACT"ueller Pfad Menüitem-Objekt
##########################################
ACT < .NO
##########################################
#Aktiviert den "ACT"ueller Pfad-Effekt
##########################################
ACT=1
##########################################
#Ergänzt die Eigenschaften des "RO"llover-Objektes
##########################################
ACT{
backColor=#ffcccc
10.fontColor=#000000
}
}
##########################################
#Definiert den Menütyp der zweiten Ebene Level 1
##########################################
2 = TMENU_LAYERS
##########################################
#Eigenschaften der zweiten Ebene
##########################################
2{
layerStyle = position:absolute;width:150px;VISIBILITY:hidden;
topOffset=0
leftOffset=60
#xPosOffset =-50
lockPosition = x
expAll=1
relativeToParentLayer=1
relativeToTriggerItem=1
hideMenuWhenNotOver=1
##########################################
#So wird das komplette Tag <DIV ID="js-menu">|</DIV> um das Objekt "2" (gesamtes Menü) gelegt.
#In der Stylesheet-Datei gibt es eine ID "js-menu" die das aussehen des Layers bestimmt.
##########################################
wrap=<DIV ID="js-menu">|</DIV>
NO{
linkWrap = |<BR>
}
ACT=1
ACT{
linkWrap=<STRONG>|</STRONG><BR>
}
}
##########################################
#Definiert den Menütyp der dritten Ebene Level 2
##########################################
3 = TMENU_LAYERS
##########################################
#Eigenschaften der dritten Ebene (in deisem Fall zu Ebene 2 identisch)
##########################################
3{
layerStyle = position:absolute;width:150px;VISIBILITY:hidden;
topOffset=0
leftOffset=60
#xPosOffset =-50
lockPosition = x
expAll=1
relativeToParentLayer=1
relativeToTriggerItem=1
hideMenuWhenNotOver=1
##########################################
#So wird das komplette Tag <DIV ID="js-menu">|</DIV> um das Objekt "2" (gesamtes Menü) gelegt.
##########################################
wrap=<DIV ID="js-menu">|</DIV>
NO{
linkWrap = |<BR>
}
ACT=1
ACT{
linkWrap=<STRONG>|</STRONG><BR>
}
}
##########################################
#Für die vierte Ebene wird hier nur ein normales Textmenü verwendet
#-> Kaskadierung bis zu vierten Ebene
##########################################
4 = TMENU
4{
wrap=<DIV ID="js-menu">|</DIV>
NO{
linkWrap = |<BR>
}
ACT=1
ACT{
linkWrap=<STRONG>|</STRONG><BR>
}
}
}
#########################################
#Eine Objekt vom Typ HMENU im mark SUBMENU erzeugen.
#########################################
marks.SUBMENU=HMENU
#########################################
#Die Eigenschaften für das SUBMENU setzen
#########################################
marks.SUBMENU{
wrap=<DIV ID="submenu" width=120>|</DIV>
#########################################
#Das Menü soll erst die Einträge ab der dritten Ebene (level 2) anzeigen
#########################################
entryLevel = 2
expAll = 0
1 = TMENU
1{
NO{
linkWrap = |<BR>
}
##########################################
#Aktiviert den "ACT"ueller Pfad-Effekt
##########################################
ACT=1
##########################################
#Ergänzt die Eigenschaften des "ACT"tuellen Objektes
##########################################
ACT{
##########################################
#Ein Wrap um das ganze Menü legen. Dieses DIV wird um das Menü gelegt
#Damit das Design über Stylesheets gesteuert werden kann.
#Die Styles liegen in der oben intgrierten Sytelsheets-Datei.
##########################################
linkWrap=<STRONG>|</STRONG><BR>
}
}
}
}
Die nötige Designvorlage sieht folgendermaßen aus:
Einige marks werden von dem oben angegebenen Template nicht verwendet
<html>
<head>
<title>Vorlage für Typo3</title>
</head>
<body>
<!-- ###EINE_SEITE###-->
<table align="center" height="100%" cellspacing="0" cellpadding="0" width="774" border="0" id="main">
<tr>
<td valign="top" width="774" class="hintergrund">
###DYN_GRAFIK###
</td>
</tr>
<tr>
<td class="hintergrund">
<table cellpadding="0" cellspacing="0" ID="kopfmenu" border="0" align="right">
<tr>
###KOPF_MENU###
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" height="100%" class="hintergrund" style="padding-top:2px">
<table cellspacing="0" cellpadding="0" height="100%" width="748" align="center">
<tr>
<td valign="top" width="155">
<div id="toolmenu">
<div class="boxhead" style="border-bottom: 1px solid #FE8000;">
Service
</div>
###TOOLBAR###
</div>
<div id="votingmenu">
<div class="boxhead" style="border-bottom: 1px solid #FE8000;">
Voting
</div>
###VOTING###
</div>
</td>
<td valign="top" style="padding: 0px 5px 0px 5px;">
<div id="inhalt">
###INHALT###
</div>
</td>
<td valign="top" width="150">
<div id="submenu">
<div class="boxhead" style="border-bottom: 1px solid #FE8000;">
Subnavigation
</div>
###SUBMENU###
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ###EINE_SEITE### -->
</body>
</html>
Und hier noch die stylesheetdatei:
body {
background-color: #bbbbbb
}
#main{
}
a {
color: #000000; /* Allgemeine Textfarbe */
text-decoration: none;
}
a:hover {
text-decoration : underline;
}
body, td, h1, h2, h3, input, textarea, div, p, table{
/* --- Standardtextart und -größe werden festgelegt --- */
font-family: Verdana, Helvetica, sans-serif;
font-size : 10px;
line-height: 15px; /* Zeilenabstand */
color: #000000; /* allgemeine Textfarbe */
}
#kopfmenu{
width: 610px;
height:20px;
background-color: #d2d2d2;
border: 1px solid #000000;
color: #ffffff;
margin-right: 7px;
margin-bottom: 5px;
}
#menu {
/* --- #menu ist das Hauptmenu (meistens links) --- */
position: relative;
padding: 0px;
text-align: left;
background-color: #D2D2D2;
border: 1px solid #000000;
height: 75%;
}
#top {
/* --- #top ist der obere Bereich --- */
height : 150px;
top: 0px;
}
.logo {
top : 60px;
left : 0px;
}
.topbild1 {
/* --- #topbild ist das (dynamisch austauschbare) Bild oben im Topbereich --- */
margin: 0px;
padding: 0px;
}
.hintergrund{
background-image: url(../gifs/gesamt_htg.gif);
background-repeat: repeat-y;
}
#submenu, #toolmenu, #votingmenu{
/* -------------- Der Bereich "Tourdaten" und "Voting" -------------- */
font-family: Verdana, Helvetica, sans-serif;
font-size : 10px;
height:10px;
background-color: #d2d2d2;
border: 1px solid #ACA48E;
text-align: left;
margin-bottom: 20px;
padding: 1px;
}
#submenu a, #toolmenu a, #votingmenu a{
display: block;
margin-left: 5px;
line-height : 1.8em;
text-decoration: none;
color:black;
}
#submenu a:hover, #toolmenu a:hover{
display: block;
margin-left: 5px;
line-height : 1.8em;
text-decoration: underline;
}
#submenu{
height:100%;
}
.boxhead{
/* -------------- Überschirft im Bereich "Tourdaten" und "Voting" -------------- */
background-color : #FE8000;
border-bottom: 1px solid #ffffff;
color: #ffffff;
font-weight: bold;
padding: 1px;
padding-left: 5px;
}
#js-menu{
background-color: Silver;
border-color: black;
border: 1px solid;
padding-left: 5px;
padding-bottom: 3px;
float:left;
width:150px;
filter: Alpha(opacity=100, finishopacity=50, style=1);
}
#js-menu a{
margin-left: 5px;
text-decoration: none;
color:black;
}
#js-menu a:hover{
margin-left: 5px;
text-decoration: underline;
color:black;
}
#inhalt {
/* --- #inhalt ist der Bereich für die Seiteninhalt. (Wirkungsbereich der Templates) --- */
position: relative;
background-color: #eeeeee;
border: 1px solid #ACA48E;
height: 100%;
padding: 15px;
}
h1 {
/* --- Überschrift erster ordnung --- */
position: relative;
margin: -15px -15px 0px -15px;
padding : 1px 12px 2px 15px;
font-weight : bold;
font-size: 11px;
color: #ffffff!important;
background-color : #FE8000;
border-bottom: 1px solid #ffffff;
}
h2 {
/*line-height : 1.2em;*/
font-size : 1.3em;
font-weight: bold;
/*margin : 0em 0px 0em -15px;
padding-left : 15px;*/
/*padding : 2em 0.5em 0.5em 15px;*/
text-align : left; /* Text innerhalb von H2 wird rechts ausgerichtet */
clear : both;
float : none;
}
h3 {
}
h4 {
}
Das fehlende Hintergrundbild "background-image: url(../gifs/gesamt_htg.gif);" kann durch ein beliebiges ersetzt werden