Zum Inhalt springen

Horizontales Menü mit Modern Template Building Howto

Erstellt am 3. Oktober 2003 · 13 Antworten · letzte Antwort am 10. Oktober 2003

Tags: Frage

matbehns ·

Hallo, ich bin ein absoluter Neuling bei Typo3 und habe auch wirklcih schon das Forum durchsucht und einiges probiert, aber ich komme einfach nicht weiter!

Ich versuche das Beispiel vom HowTo Modern Template Building auf meine Bedürfnisse umzuschreiben und möchte dabei aber gerne ein horizontales Menü, hab auch schon sowas "ähnliches" hinbekommen, aber alles in allem klappt es nicht. Aus der Referenz werd ich auch nicht schlau. Kann mir mal jemand ein Beispiel hinlegen, was auch mit dem folgenden Script noch funzt? Danke im Voraus!!!!!

# Configuring the Auto-Parser for main template:
plugin.tx_automaketemplate_pi1 {
# Read the template file:
content = FILE
content.file = fileadmin/template/main/template_deu.html

# Here we define which elements in the HTML that
# should be wrapped in subpart-comments:
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY

HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title

TD.all = 1
}

# Prefix all relative paths with this value:
relPathPrefix = fileadmin/template/main/
}

###############################

# Menu 1 cObject
temp.menu_1 = HMENU
# First level menu-object, textual
temp.menu_1.1 = TMENU
temp.menu_1.1 {
# Normal state properties
NO.allWrap = <div class="menu1-level1-no"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="menu1-level1-act"> | </div>
}
# Second level menu-object, textual
temp.menu_1.2 = TMENU
temp.menu_1.2 {
# Normal state properties
NO.allWrap = <div class="menu1-level2-no"> | </div>
# Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="menu1-level2-act"> | </div>
}

###############################

# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1
# Select only the content between the <body>-tags
workOnSubpart = DOCUMENT_BODY

# Substitute the ###menu_1### subpart with dynamic menu:
subparts.menu_1 < temp.menu_1

# Substitute the ###content### subpart with some example content:
subparts.content < styles.content.get
}


# Main TEMPLATE cObject for the HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1
# Select only the content between the <head>-tags
workOnSubpart = DOCUMENT_HEADER
}




# Default PAGE object:
page = PAGE
page.typeNum = 0
page.bodyTag= <body background = "fileadmin emplatemainimagesackground.png">

# Copying the content from TEMPLATE for <body>-section:
page.10 < temp.mainTemplate

# Copying the content from TEMPLATE for <head>-section:
page.headerData.10 < temp.headTemplate

matbehns ·

na mein Menu wird immer nur senkrecht angezeigt und ich möchte es horizontal haben. Hatte das auch schon hinbekommen, aber im Act Menü verschwand dann immer mein Hintergrundbild....also unbefriedigende Lösung

Vielleicht brauch ich auch nur einen Denkanstoß, aber ich hab grad keine Ahnung warum!?

wkueting ·

Wenn es Dir mit dem <div> nur darum geht die class zu definieren, dann nimm doch dafür <span>. Dann hast Du keinen Zeilenumbruch.

matbehns ·

tschuldige, kannst du mir das vielleicht mit einem Satz mehr erklären!

Habe DIV im TypoScript einfach mal mit SPAN ausgetauscht, dann klappt das auch mit dem Horizontalen Menü 😃

aber dann is mein stylesheet hin und wenn ich im Stylesheet DIV durch SPAN ersetze, dann ist das Menü wieder senkrecht! :o

Was mache ich falsch? Wie gesagt, Typoscript und CSS stammen aus Originalvorlage von Modern Template Building

wkueting ·

Hhm, habe ehrlich gesagt nur mal fix im Editor und Browser-Preview experimentiert, um zu schauen ob bei <DIV> immer ein Zeilenumbruch kommt.

Wie sieht denn der erzeugte HTML-Code aus? Wenn Du testweise im <DIV> die class mal wegläßt, wie verhält es sich dann?

matbehns ·

Also, vielen Dank!!! Es klappt jetzt, ich hatte einen Fehler in meinem Stylesheet und Template. Mein Menü ist jetzt horizontal, wie ich es wollte. Laut SelfHTML erzwingt div immer einen Zeilenumbruch. (nur als Info für dich)

Also ich bin jetzt super glücklich, denn eine weitere Hürde ist geschafft! 🙂 Vielen Dank und einen schönen Abend noch!

Martin

matbehns ·

Na erstmal hatte Typo3 mein Stylesheet gar nicht richtig eingebunden, was mir aber schon klar war, also habe ich es im Setup nochmal definiert.

Und dann habe ich das Stylesheet ja vom Modern Template Building Howto übernommen und das fand ich sehr verwirrend. Nach ein paar Änderungen hab ich inklusive der Umwandlung von DIV in SPAN und meinen persönlichen Vorlieben ging es dann.

Ich frage mich nur, ob das Setup was ich oben gepostet habe für mich sehr sinnvoll ist. Mag ja technisch sehr sinnvoll realisiert sein, aber ich ahbe versucht ein paar Änderungen in meinem Menü vorzunehmen (2 Menü Bereiche) und das bekomme ich noch nicht ganz hin. Was hällst du denn davon?

wkueting ·
matbehns schrieb

Ich frage mich nur, ob das Setup was ich oben gepostet habe für mich sehr sinnvoll ist. Mag ja technisch sehr sinnvoll realisiert sein, aber ich ahbe versucht ein paar Änderungen in meinem Menü vorzunehmen (2 Menü Bereiche) und das bekomme ich noch nicht ganz hin. Was hällst du denn davon?

Stellt sich die Frage nach Deinen Anforderungen bzw. was Du erreichen willst?
Was verstehst Du unter zwei Menübereichen und was funktioniert in dem Zusammenhang nicht?

matbehns ·

Hallo, habs jetzt mal 2 Tage ruhen lassen und mit einem frischem Kopf ging es gleich voran.

Also zunächst einmal verstehe ich jetzt langsam wie Typoscript funktioniert. Mein Setup is gar nicht mal so schlecht - man muss es halt nur verstehen können! 🙂

Mit 2 Menüs meine ich ein horizontales oben mit entryLevel=0 und dann links ein 2. mit entryLevel=1. Wie gesagt ich bin weiter gekommen. Das horizontale Menü funktioniert und zeigt auch nur das Level 0 an, aber obwohl mein Menübereich 2 anscheinend eingebunden wird, erscheinen dort keine Menüeinträge. Das Level steht auf 1, aber auch wenn ich es auf 0 setze wird kein Menü angezeigt. Ich habe es in eine grafisch umlegte Tabelle eingefügt, was doch kein Problem darstellen sollte, oder?

Wenn du magst schick ich dir auch gern mal nen Link zu meiner Seite, damit du sehen kannst was ich meine. Hier noch mal mein aktualisiertes Setup.

# Configuring the Auto-Parser for main template:
plugin.tx_automaketemplate_pi1 {
# Read the template file:
content = FILE
content.file = fileadmin/template/main/template_deu.html

# Here we define which elements in the HTML that
# should be wrapped in subpart-comments:
elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY

HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title

TD.all = 1
}

# Prefix all relative paths with this value:
relPathPrefix = fileadmin/template/main/
}

###############################

# Menu 1 cObject
temp.menu_1 = HMENU
temp.menu_1.entryLevel = 0
# First level menu-object, textual
temp.menu_1.1 = TMENU
temp.menu_1.1 {
# Normal state properties
NO.allWrap = <span class="menu1-level1-no"> | </span>
}

# Menu 2 cObject
temp.menu_2 = HMENU
temp.menu_2.entryLevel = 1
temp.menu_2 = TMENU
temp.menu_2 {
# Normal state properties
NO.allWrap = <span class="menu2-level1-no"> | </span>
}

###############################

# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1
# Select only the content between the <body>-tags
workOnSubpart = DOCUMENT_BODY

# Substitute the ###menu_1### subpart with dynamic menu:
subparts.menu_1 < temp.menu_1

# Substitute the ###menu_2### subpart with dynamic menu:
subparts.menu_2 < temp.menu_2

# Substitute the ###content### subpart with some example content:
subparts.content < styles.content.get

# Substitute the ###rootline### subpart with rootline:
subparts.rootline < temp.rootline
}


# Main TEMPLATE cObject for the HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
# Feeding the content from the Auto-parser to the TEMPLATE cObject:
template =< plugin.tx_automaketemplate_pi1
# Select only the content between the <head>-tags
workOnSubpart = DOCUMENT_HEADER
}

# Default PAGE object:
page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin emplatemainstylesheet.css
page.bodyTag= <body background = "fileadmin emplatemainimagesackground.png">

# Copying the content from TEMPLATE for <body>-section:
page.10 < temp.mainTemplate

# Copying the content from TEMPLATE for <head>-section:
page.headerData.10 < temp.headTemplate

wkueting ·

Wie sieht denn der erzeugte HTML-Code aus?

Ich habe mit dem AutoTemplate Ext noch nicht gearbeitet, deshalb fällt mir auf dem ersten Blick in deinem Setup nichts auf - vielleicht jemand anderen?

Poste doch mal den HTML-Bereich des Menü 2.

matbehns ·

Hallo, danke, dass du dich immer noch bemühst! Also dies ist der Code des HTML-Templates:

<!-- Submenü: -->
<td width="200" valign="top">
<table width="170" cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="3" width="170" height="28" background="images/sub_top.png"></td>
</tr>
<tr>
<td width="12" background="images/sub_l.png"></td>
<td id="menu_2" width="146">
<div class="menu2-level1-no"><a href="#">Level 2 item</a></div>
<div class="menu2-level1-act"><a href="#">Level 2 item (act)</a></div>
</td>
<td width="12" background="images/sub_r.png"></td>
</tr>
<tr>
<td colspan="3" width="170" height="20" background="images/sub_bottom.png"></td>
</tr>
</table>
</td>

so sieht er aus, wenn er im Browser steht:

<!-- Submenü: -->
<td width="200" valign="top">
<table width="170" cellspacing="0" cellpadding="0" border="0">
<tr>
<TD colspan="3" width="170" height="28" background="fileadmin/template/main/images/sub_top.png"></TD>
</tr>
<tr>
<TD width="12" background="fileadmin/template/main/images/sub_l.png"></TD>
<td id="menu_2" width="146"></TD>
<TD width="12" background="fileadmin/template/main/images/sub_r.png"></TD>
</tr>
<tr>
<TD colspan="3" width="170" height="20" background="fileadmin/template/main/images/sub_bottom.png"></TD>
</tr>
</table>
</TD>

scheinbar ist menu_2 eingebunden, weil das random Menü ersetzt wurde.

falls sich mal jemand ein Bild davon verschaffen möchte:

http://www.globalgate.org/site/index.php?id=1

wkueting ·

Sorry, da kann ich Dir heute leider nicht mehr weiterhelfen. Da muss ich mich erst in die Doku des AutoTemp einlesen. Ich muss gleich zur Arbeit und zwischen Tür und Angel will ich Dir da auch nichts schreiben.
Aber bitte poste zum Vergleich bitte noch den Source vom Menü 1.

BTW: Der gewählte Menüpunkt im Menü 1 hat auch eine Unterebene? - Nichts für ungut... 🙂