---
title: "Horizontales Menü mit Modern Template Building Howto"
url: "https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2003-10-03"
last_reply: "2003-10-10"
replies: 13
solved: false
page: 1
pages: 1
lang: "de"
---

# Horizontales Menü mit Modern Template Building Howto

TYPO3 › Menüs · 13 Antworten · gestartet 2003-10-03

## Eröffnungsbeitrag

**matbehns** · 2003-10-03 · [Beitrag #1](https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto/1)

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

## Antworten

### [#2](https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto/2) · wkueting · 2003-10-03

Wo liegt denn jetzt genau Dein Problem? Was ist Deine Frage? Was funktioniert nicht?!  o.O

### [#3](https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto/3) · matbehns · 2003-10-03

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!?

### [#4](https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto/4) · wkueting · 2003-10-04

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

### [#5](https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto/5) · matbehns · 2003-10-04

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ü  :D

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

### [#6](https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto/6) · wkueting · 2003-10-04

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?

### [#7](https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto/7) · matbehns · 2003-10-05

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

### [#8](https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto/8) · wkueting · 2003-10-06

Was hast Du denn jetzt anders gemacht bzw. was waren Deine Fehler?  :)

### [#9](https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto/9) · matbehns · 2003-10-07

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?

### [#10](https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto/10) · wkueting · 2003-10-07

> **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?

### [#11](https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto/11) · matbehns · 2003-10-09

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

### [#12](https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto/12) · wkueting · 2003-10-10

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.

### [#13](https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto/13) · matbehns · 2003-10-10

**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>

### [#14](https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto/14) · wkueting · 2003-10-10

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...  :)

---

Quelle: „Horizontales Menü mit Modern Template Building Howto“, typo3.net, https://www.typo3.net/d/6217-horizontales-menue-mit-modern-template-building-howto
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.