Hallo, ich habe Probleme mit meinem horizontalem Menü:
http://p27109.typo3server.info/index.php?id=1
Klickt man hier auf Projekte erscheint in der zweiten Ebene die zweite Nav_ebene. Bei weiterem Klick erscheint in der dritten Ebene die dritte Nav_ebene.
Es gibt aber zwei Probleme:
1. Die weite und dritte Ebende sollen ebenfalls ganz links beginnen, wie die erste auch
2. die Menüpunkte der ersten Ebene sollen ohne Unterbrechung durchlaufen und nicht wie jetzt um die Länge der jeweiligen Unterebene nach rechts verschoben werden. Ich hönge Euch mal mein bisheriges TS zu diesem Problem an.
Danke Marc
10.marks {
# Das grafische Menü erstellen
MENUE1 = HMENU
MENUE1 {
special = directory
special.value = 1
entryLevel = 0
1 = GMENU
1.NO = 1
1.NO {
XY = [10.w]+20 , 78
# Text auf den Menüpunkt rendern
10 = TEXT
10.text.field = title
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontColor = #000000
10.fontFile = fileadmin/fonts/officina.ttf
10.fontWeight = bold
10.fontSize = 15
10.niceText = 1
10.offset = 16, 16
20 = IMAGE
20.XY = 14,14
20.file = fileadmin/bilder/menue_off.gif
20.offset = 0, 5
30 = IMAGE
30.XY = 745,26
30.file = fileadmin/bilder/blanc.gif
30.offset = 0, 0
}
# Roll over Ebene 1
1.RO < .1.NO
1.RO.10.fontColor = #F9A21C
1.RO.20.file = fileadmin/bilder/menue_on.gif
1.CUR < .1.NO
1.CUR.10.fontColor = #F9A21C
20 = IMAGE
1.CUR.20.file = fileadmin/bilder/menue_on.gif
1.CUR.20.offset = 0, 5
# Die zweite Ebene als Kopie der ersten Ebene beschreiben
2 < .1
2.NO {
XY = [10.w]+20 , 52
Ypos = 60
10.fontColor = #000000
10.fontSize = 14
10.fontFile = fileadmin/fonts/officina.ttf
10.offset = 16, 16
}
2.RO < .2.NO
2.RO.10.fontColor = #F9A21C
2.CUR < .2.NO
XY = [10.w]+20 , 26
2.CUR.10.fontColor = #F9A21C
# Die dritte Ebene als Kopie der ersten Ebene beschreiben
3 < .1
3.NO {
XY = [10.w]+20 , 26
10.fontColor = #000000
10.fontSize = 14
10.fontFile = fileadmin/fonts/officina.ttf
}
3.RO < .3.NO
3.RO.10.fontColor = #F9A21C
3.CUR < .3.NO
3.CUR.10.fontColor = #F9A21C
}
p.s ich hätte da noch eine Frage. Besteht die Möglichkeit für das grafische Menü einen transparenten Hintergrund zu generieren?
Das mit dem transparentem Hintergrund habe ich hinbekommen:
transparentBackground = true
Bei der Rest stehe ich aber echt auf dem Schlauch. Ist das allein mit Typoscript überhaupt möglich.
Olla!
In Deinem TS packst Du das gesamte Menü in ein <td> hinein, wenn nun die zweite/dritte Ebene ebenfalls links beginnen soll, muss jede Ebene in ein eigenes <tr>.
optimaler wäre es, wenn Du um Dein Menü ein <div> packst, welches in Dein Menü <td> kommt, und Du dann die einzelnen Menüpunkte als Liste (<ul><li>) renderst und diese Liste dann mit CSS stylest.
(oder aber gleich das Layout nochmal schnell tabellenlos aufbauen)
gruss, fuss
wie kann ich den den einzelnen ebenen eigene <tr> zuweisen. ich dachte das geht nur für das ganze Menü, das ich über den marker im template anspreche??
So z.B:
MENU1 {
stdWrap.wrap = |
...
1.NO {
wrap = |
...
}
}
gruss, fuss
Hallo fuss, danke für den tipp, bringt mich schon ein bißchen weiter:
bin aber noch nicht am ziel:
hier mein jetziges typoscript:
10.marks {
# Das grafische Menü erstellen
MENUE1 = HMENU
MENUE1 {
special = directory
special.value = 1
entryLevel = 0
1 = GMENU
1.NO = 1
1.NO {
XY = [10.w]+20 , 26
transparentBackground = true
# Text auf den Menüpunkt rendern
10 = TEXT
10.text.field = title
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontColor = #000000
10.fontFile = fileadmin/fonts/DINPro.ttf
10.fontWeight = bold
10.fontSize = 15
10.niceText = 1
10.offset = 16, 16
20 = IMAGE
20.XY = 14,14
20.file = fileadmin/bilder/menue_off.gif
20.offset = 0, 5
30 = IMAGE
30.XY = 745,26
30.file = fileadmin/bilder/blanc.gif
30.offset = 0, 0
}
# Roll over Ebene 1
1.RO < .1.NO
1.RO.10.fontColor = #F9A21C
1.RO.20.file = fileadmin/bilder/menue_on.gif
1.CUR < .1.NO
1.CUR.10.fontColor = #F9A21C
1.CUR.20.file = fileadmin/bilder/menue_on.gif
1.ACT < .1.NO
1.ACT.10.fontColor = #F9A21C
1.ACT.20.file = fileadmin/bilder/menue_on.gif
# Die zweite Ebene als Kopie der ersten Ebene beschreiben
2 < .1
2.NO {
wrap = <tr>
10.fontColor = #000000
10.fontSize = 14
10.fontFile = fileadmin/fonts/DINPro.ttf
10.offset = 16, 16
}
2.RO < .2.NO
2.RO.10.fontColor = #F9A21C
2.RO.20.file = fileadmin/bilder/menue_on.gif
2.CUR < .2.NO
XY = [10.w]+20 , 26
2.CUR.10.fontColor = #F9A21C
2.CUR.20.file = fileadmin/bilder/menue_on.gif
2.ACT < .2.NO
2.ACT.10.fontColor = #F9A21C
2.ACT.20.file = fileadmin/bilder/menue_on.gif
# Die dritte Ebene als Kopie der ersten Ebene beschreiben
3 < .2
3.NO {
wrap = <tr>
10.fontColor = #000000
10.fontSize = 14
10.fontFile = fileadmin/fonts/DINPro.ttf
}
3.RO < .3.NO
3.RO.10.fontColor = #F9A21C
3.RO.20.file = fileadmin/bilder/menue_on.gif
3.CUR < .3.NO
3.CUR.10.fontColor = #F9A21C
3.CUR.20.file = fileadmin/bilder/menue_on.gif
3.ACT < .1.NO
3.ACT.10.fontColor = #F9A21C
3.ACT.20.file = fileadmin/bilder/menue_on.gif
}
Es gibt aber noch Probleme.
1. Aus irgendeinem Grund funtioniert das mit dem <tr> nicht in der dritten ebene
2. die ebenen gehen komischerweise nach oben weg??
3. Wenn ich bsp. in der ersten Zeile auf Standorte klicke erscheinen die Unterpunkte in der zeile darüber, aber leider auch die restlichen Punkte von Ebene 1??
der Links zur seite
http://p27109.typo3server.info/index.php?id=1
ok, anderer Ansatzpunkt:
Schmeiß das mit dem wrap <tr> wieder raus und nimm nur folg. wraps in Deinen Menücode mit rein:
MENUE1 {
1.wrap = <div id="ebene1">|</div>
...
2.wrap = <div id="ebene2">|</div>
}
Somit wird jede Menüebene in ein eigenes div gepackt, welches Du aufgrund der id im CSS explizit ansprechen kannst.
Dann noch folg. in Dein CSS:
#ebene1, #ebene2 {
width: 745;
height: 26px;
display: block;
}
#ebene1 img, #ebene2 img {
float: left;
}
Hierdurch bekommen Deine Ebene eine feste Breite/Höhe, und alle Grafiken werden nebeneinander dargestellt, und die einzelnen Ebenen untereinander.
DAS sollte es dann gewesein sein! 😉
gruss, fuss
p.s.: wenn Du einen wrap definierst, dann brauchst Du auch das pipe Symbol, weil an die Position wird der Inhalt eingefügt. So müßte Zeile 55 z.B. korrekt lauten
wrap = <tr>|</tr>
fast, aber leider gibt es immer noch ein problem. Schau bitte nochmal auf die Seite:
wenn Du auf Projekte klickst, erscheint das Untermenü in der richtige zweiten Zeile. die Menüpunte der ersten Ebene, die eigendlich in erste zeile gehören erscheinen in einer neuen dritten zeile??
poste bitte mal Dein aktuelles TS.
Ah, stimmt, daß Menü wird verschachtelt dargestellt, ich Trottel 😉
Daher solltest Du Dir das Menü in Teile aufteilen (bei 3 Ebenen), und mit entryLevel arbeiten, und dementsprechend 3 separate Marker nehmen.
Hier mein gesamtes TS. Wie meinst Du das mit 3 Markern. im html-Template? Habe ich dann, wenn nur eine Ebene dargestellt wird nicht eine Lücke zwischen menü und Inhalt??
# Allgemeine TypoScript-Konfigurationen
config.linkVars = L
config.sys_language_uid = 0
config.language = de
meta.TITLE = OHV
page = PAGE
page {
typeNum = 0
config.metaCharset = utf-8
# Die Designvorlage integrieren
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/index_test.html
10.workOnSubpart = DOKUMENT
stylesheet = fileadmin/include/style.css
10.marks {
# Das grafische Menü erstellen
MENUE1 = HMENU
MENUE1 {
1.wrap = <div id="ebene1">|</div>
2.wrap = <div id="ebene2">|</div>
3.wrap = <div id="ebene3">|</div>
special = directory
special.value = 1
entryLevel = 0
1 = GMENU
1.NO = 1
1.NO {
XY = [10.w]+20 , 26
transparentBackground = true
# Text auf den Menüpunkt rendern
10 = TEXT
10.text.field = title
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontColor = #000000
10.fontFile = fileadmin/fonts/DINPro.ttf
10.fontWeight = bold
10.fontSize = 15
10.niceText = 1
10.offset = 16, 16
20 = IMAGE
20.XY = 14,14
20.file = fileadmin/bilder/menue_off.gif
20.offset = 0, 5
30 = IMAGE
30.XY = 745,26
30.file = fileadmin/bilder/blanc.gif
30.offset = 0, 0
}
# Roll over Ebene 1
1.RO < .1.NO
1.RO.10.fontColor = #F9A21C
1.RO.20.file = fileadmin/bilder/menue_on.gif
1.CUR < .1.NO
1.CUR.10.fontColor = #F9A21C
1.CUR.20.file = fileadmin/bilder/menue_on.gif
1.ACT < .1.NO
1.ACT.10.fontColor = #F9A21C
1.ACT.20.file = fileadmin/bilder/menue_on.gif
# Die zweite Ebene als Kopie der ersten Ebene beschreiben
2 < .1
2.NO {
10.fontColor = #000000
10.fontSize = 14
10.fontFile = fileadmin/fonts/DINPro.ttf
10.offset = 16, 16
}
2.RO < .2.NO
2.RO.10.fontColor = #F9A21C
2.RO.20.file = fileadmin/bilder/menue_on.gif
2.CUR < .2.NO
XY = [10.w]+20 , 26
2.CUR.10.fontColor = #F9A21C
2.CUR.20.file = fileadmin/bilder/menue_on.gif
2.ACT < .2.NO
2.ACT.10.fontColor = #F9A21C
2.ACT.20.file = fileadmin/bilder/menue_on.gif
# Die dritte Ebene als Kopie der ersten Ebene beschreiben
3 < .1
3.NO {
10.fontColor = #000000
10.fontSize = 14
10.fontFile = fileadmin/fonts/DINPro.ttf
}
3.RO < .3.NO
3.RO.10.fontColor = #F9A21C
3.RO.20.file = fileadmin/bilder/menue_on.gif
3.CUR < .3.NO
3.CUR.10.fontColor = #F9A21C
3.CUR.20.file = fileadmin/bilder/menue_on.gif
3.ACT < .1.NO
3.ACT.10.fontColor = #F9A21C
3.ACT.20.file = fileadmin/bilder/menue_on.gif
}
# Inhalt ausgeben
CONTENT1 = CONTENT
CONTENT1 {
table = tt_content
select.orderBy = sorting
select.where = colPos = 0
select.languageField = sys_language_uid
select.limit = 2
}
# Bilder ausgeben
CONTENT2 = CONTENT
CONTENT2 {
table = tt_content
select.orderBy = sorting
select.where = colPos = 2
select.languageField = sys_language_uid
select.limit = 2
}
}
# Die Überschrift neu formatieren
lib.stdheader >
lib.stdheader = CASE
lib.stdheader {
key.field = header_layout
default = TEXT
default.field = header
default.wrap = <h1>|</h1>
1 = IMAGE
1.file = GIFBUILDER
1.file {
XY = 365, 50+[15.h]
backColor = #FFFFFF
10 = TEXT
10.text.field = header
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontFile = fileadmin/fonts/DINPro.ttf
10.fontColor = #000000
10.fontWeight = bold
10.fontSize = 24
10.niceText = 1
10.offset = 1, 30
# Eine ggf. vorhandene zweite Textzeile
15 < .10
15.text.listNum = 1
15.offset = 1, 50
}
# Hilfsebene zur Berechnung der Höhe von Menüpunkten
16 < .10
16.text.case = upper
16.text.listNum = 1
16.fontSize = 20
16.offset = 1000,1000
wrap = |<br>
}
nc.aTagParams = class="nav"
}
Wie meinst Du das mit 3 Markern. im html-Template?
Ja, im HTML-Template für jede Ebene einen eigenen Marker
Habe ich dann, wenn nur eine Ebene dargestellt wird nicht eine Lücke zwischen menü und Inhalt??
Prinzipiell ja, was Du aber theoretisch ändern könntest, wenn im CSS für die Ebenen keine Höhe angegeben wird, Dann würden die Ebenen nur den Platz einnehmen, wenn da acuh Grafiken drin sind.
Im TS setzt Du Dir alle wraps für die Ebenen hintereinander, die Definitionen für die 2. und 3. Ebene wird aber durch das Kopieren (2 < .1) wieder überschrieben. Daher sollte die wrap Definition NACH dem Kopieren geschehen.
Tschuldigung, so ganz verstehe ich das noch nicht.
Ich definiere also kein komplett neues Menü mit eigenem entrylevel für jede ebene, sondern nur die einzelnen ebenen 1. 2. und 3. im html template. Wie sieht so ein marker denn dann im html template aus?? Für das menü habe ich ###MENUE1### gesetzt
Hi fuss, Du hast mir schon so sehr geholfen. Kannst Du mir bei letzten Schritt auch noch beistehen. Wie meinst Du dass mit einem Marker für jede einzelnde Ebene?
Olla!
Wie meinst Du dass mit einem Marker für jede einzelnde Ebene?
Naja, Momentan definierst Du Dir ein Menü ###MENU1### mit drei Ebenen.
Teile Deine 3 Ebenen in 3 Menüs auf (MENU1A, MENU1B, MENU1C), nun setzt Du Dir für jedes Menü den entsprechenden entryLevel (0, 1, 2 müsste es bei Dir sein) und dann setzt Du in Deinem HTML-Template die Marker, die dann gefüllt werden:
<tr><td>###MENU1A###</td></tr>
<tr><td>###MENU1B###</td></tr>
<tr><td>###MENU1C###</td></tr>
bzw. so anpassen, wie es für Deinen momentant Marker ###MENU1### aussieht.
gruss, fuss
Hab ich jetzt gemacht. Nun erscheint die zweite und dritte Ebene gar nicht mehr ??
10.marks {
# Das grafische Menü _ erste Ebene erstellen
MENU1A = HMENU
MENU1A {
1.wrap = <div id="ebene1">|</div>
special = directory
special.value = 1
entryLevel = 0
1 = GMENU
1.NO = 1
1.NO {
XY = [10.w]+20 , 26
transparentBackground = true
# Text auf den Menüpunkt rendern
10 = TEXT
10.text.field = title
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontColor = #000000
10.fontFile = fileadmin/fonts/DINPro.ttf
10.fontWeight = bold
10.fontSize = 15
10.niceText = 1
10.offset = 16, 16
20 = IMAGE
20.XY = 14,14
20.file = fileadmin/bilder/menue_off.gif
20.offset = 0, 5
30 = IMAGE
30.XY = 745,26
30.file = fileadmin/bilder/blanc.gif
30.offset = 0, 0
}
# Roll over Ebene 1
1.RO < .1.NO
1.RO.10.fontColor = #F9A21C
1.RO.20.file = fileadmin/bilder/menue_on.gif
1.CUR < .1.NO
1.CUR.10.fontColor = #F9A21C
1.CUR.20.file = fileadmin/bilder/menue_on.gif
1.ACT < .1.NO
1.ACT.10.fontColor = #F9A21C
1.ACT.20.file = fileadmin/bilder/menue_on.gif
}
# Das grafische Menü _ zweite Ebene erstellen
MENU1B = HMENU
MENU1B {
2.wrap = <div id="ebene2">|</div>
special = directory
special.value = 1
entryLevel = 1
2 = GMENU
2.NO = 2
2.NO {
XY = [10.w]+20 , 26
transparentBackground = true
# Text auf den Menüpunkt rendern
10 = TEXT
10.text.field = title
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontColor = #000000
10.fontFile = fileadmin/fonts/DINPro.ttf
10.fontWeight = bold
10.fontSize = 15
10.niceText = 1
10.offset = 16, 16
20 = IMAGE
20.XY = 14,14
20.file = fileadmin/bilder/menue_off.gif
20.offset = 0, 5
30 = IMAGE
30.XY = 745,26
30.file = fileadmin/bilder/blanc.gif
30.offset = 0, 0
}
# Roll over Ebene 2
2.RO < .2.NO
2.RO.10.fontColor = #F9A21C
2.RO.20.file = fileadmin/bilder/menue_on.gif
2.CUR < .2.NO
2.CUR.10.fontColor = #F9A21C
22.CUR.20.file = fileadmin/bilder/menue_on.gif
2.ACT < .2.NO
2.ACT.10.fontColor = #F9A21C
2.ACT.20.file = fileadmin/bilder/menue_on.gif
}
# Das grafische Menü _ dritte Ebene erstellen
MENU1C = HMENU
MENU1C {
3.wrap = <div id="ebene3">|</div>
special = directory
special.value = 1
entryLevel = 2
3 = GMENU
3.NO = 3
3.NO {
XY = [10.w]+20 , 26
transparentBackground = true
# Text auf den Menüpunkt rendern
10 = TEXT
10.text.field = title
10.text.listNum = 0
10.text.listNum.splitChar = |
10.fontColor = #000000
10.fontFile = fileadmin/fonts/DINPro.ttf
10.fontWeight = bold
10.fontSize = 15
10.niceText = 1
10.offset = 16, 16
20 = IMAGE
20.XY = 14,14
20.file = fileadmin/bilder/menue_off.gif
20.offset = 0, 5
30 = IMAGE
30.XY = 745,26
30.file = fileadmin/bilder/blanc.gif
30.offset = 0, 0
}
# Roll over Ebene 3
3.RO < .3.NO
3.RO.10.fontColor = #F9A21C
3.RO.20.file = fileadmin/bilder/menue_on.gif
3.CUR < .3.NO
2.CUR.10.fontColor = #F9A21C
22.CUR.20.file = fileadmin/bilder/menue_on.gif
3.ACT < .3.NO
3.ACT.10.fontColor = #F9A21C
3.ACT.20.file = fileadmin/bilder/menue_on.gif
}
da dazu gehörige html
<link rel="stylesheet" type="text/css" href="include/style.css">
<!-- ###DOKUMENT### begin -->
<table width="800" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30"><img name="" src="fileadmin/bilder/blanc.gif" width="30" height="30" alt="" /></td>
<td width="745" valign="top"><table width="745" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="115" colspan="3"><img src="fileadmin/bilder/logo.gif" alt="Logo des OHV" width="745" height="115" /></td>
</tr>
<tr>
<td colspan="3" valign="top"><table width="745" height="26" border="0" cellpadding="0" cellspacing="0" background="fileadmin/bilder/menueleiste.gif">
<tr>
<td background="fileadmin/bilder/menueleisteback.gif"><table width="745" border="0" cellspacing="0" cellpadding="0">
<tr><td>###MENU1A###</td></tr>
<tr><td>###MENU1B###</td></tr>
<tr><td>###MENU1C###</td></tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
</tr>
<tr>
<td width="470" valign="top"><img name="" src="fileadmin/bilder/blanc.gif" width="470" height="20" alt=" " /><br />
###CONTENT1###</td>
<td width="12" valign="top"><table width="12" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="500" background="fileadmin/bilder/leiste_vertikal.gif"> </td>
</tr>
</table>
<br /></td>
<td width="263" valign="top">###CONTENT2###</td>
</tr>
</table></td>
<td width="25"><img name="" src="fileadmin/bilder/blanc.gif" width="25" height="25" alt="" /></td>
</tr>
</table>
<!-- ###DOKUMENT### end -->
Kommentier mal folg. beiden Zeilen bei allen Menüs testweise aus, um zu gucken, ob überhaupt was kommt:
special = directory
special.value = 1
hab ich für alle drei menüebenen gemacht. Das gleiche wie vorher
hab ich für alle drei menüebenen gemacht. Das gleiche wie vorher
Werden denn die neuen Marker überhaupt ersetzt?
also z.B. zum testen:
MENU1B = TEXT
MENU1B.value = bla