Hauptnavigation horizontal

Hallo zusammen,
ich bin im Moment dabei mir eine Homepage mit Typo3 zu programmieren läuft soweit auch ganz gut, jedoch ich habe mich entschlossen eine Horizontale Navigation einzubauen. Hier ist mein Problem, ich weiß nicht wie ich sowas Programmieren kann und benötige etwas hilfe. Ich habe ausch schon ein paar foren durchgesucht auch Skripte gefunden, die in meine Richtung gehen aber sind auf meiner Homepage nicht gelaufen, warum auch immer.
Ich habe mir das ganze so vorgestellt.

Ebene 1 Ebene2 Ebene 3
Untermenu 1
Untermenu 2
....

Sobald man über dem Button Ebene ist sollten die Untermenus erscheinen. Ich hoffe mir kann jemand helfen. Danke im Vorraus

Hallo.

Mir stellt sich etwas die Frage
a) was Du bisher probiert hast?
b) warum/was nicht geklappt hat?

Eine Anleitung wäre z.B. http://www.mortox.de/typo3-tipps/typoscript-sammlung/dropdown-menue-mit-3-ebenen.html

Viele Grüße
Julian

Hallo Julian,
Erstmal danke für deine schnelle Antwort.
Diese Seite hatte ich auch probiert gehabt aber nach dem Einbinden in meine Seite wurde nichts agezeigt, als wäre kein Template vorhanden. Mein Aufbau sieht so aus das ich den subpart ###HAUPTNAVIGATION### genannt habe, und alle templates aus einem Systemordner in das Haupttemplate lade.

Und dem Subpart hast Du das Menü (bzw. das entsprechende TS-Objekt) zugewiesen?

Zeigt doch evtl. mal die (relevanten) TS-Teile. Sonst ist das mehr ein Herumraten...

Also hier die Ausschnitte:

Html Template:

<!-- ###HAUPT_NAVI### start-->
<div id="mainnavcontainer">
<ul>
Navigation
</ul>
</div>
<!-- ###HAUPT_NAVI### stop-->

Ts vom Haupttemplate

page.10.subparts.HAUPT_NAVI < tmp.HAUPTNAVIGATION

TS HAUPTNAVIGATION im Systemordner

temp.HAUPTNAVIGATION = HMENU
temp.HAUPTNAVIGATION {
excludeUidList = 0

special = directory
# Hier die Start-ID angeben
special.value = 66

wrap = <div class="menu"> | </div>

# Hauptmenue
1 = TMENU
1 {
wrap = <ul> | </ul>
expAll = 1
NO.ATagTitle.field = subtitle//title
NO.wrapItemAndSub = <li> | </li>
NO.stdWrap.prepend = COA
NO.stdWrap.prepend.10.wrap = ~&nbsp; |
IFSUB = 1
IFSUB {
wrapItemAndSub = <li> | </li>
allWrap = | <!--<![endif]-->
linkWrap = |<!--[if IE 7]><!-->
ATagBeforeWrap = 1
}
ACT < .NO
ACT = 1
ACT.ATagParams = class=dropact
ACTIFSUB < .IFSUB
ACTIFSUB.ATagParams = class=dropact
}
2 = TMENU
2 {
wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
expAll = 1
NO.ATagTitle.field = subtitle//title
NO.wrapItemAndSub = <li> | </li>
IFSUB = 1
IFSUB {
wrapItemAndSub = <li> | </li>
allWrap = | <!--<![endif]-->
linkWrap = |<!--[if IE 7]><!-->
ATagBeforeWrap = 1
ATagParams = class=drop
}
}

3 < .2

4 < .2

}

lib.demo_ts < temp.HAUPTNAVIGATION

Das ist jetzt das Beispiel was du auch gepostet hast. nach den Einstellungen kommt keine Reaktion im FE. Am Cache liegt es auch nicht, den habe ich schon geleert.

Wenn Du Dich beim posten nicht vertippt hast, dann ist's logisch:

Okulus schrieb

(...)
page.10.subparts.HAUPT_NAVI < tmp.HAUPTNAVIGATION
(...)
temp.HAUPTNAVIGATION = HMENU
(...)

Du nimmst einmal tmp, einmal temp... 😉

Die Zeile kannst Du Dir sparen, da Du temp.HAUPTNAVIGATION direkt an den Subpart zuweist und daher kein lib-Objekt benötigst.
lib.demo_ts < temp.HAUPTNAVIGATION

Ok jetzt hab ich eine Aufzählung als Struktur für das Menu das css

ul.menu, ul.menu ul {

list-style-type: none;

}

ul.menu a {

display: block;

padding: 3px 10px 3px 10px;

font-weight: normal;

}

ul.menu li {

padding: 0;

margin: 0;

float: left;

background-color: #FFF9E4;

border:1px solid #26383D;

height: 20px;

}

/* Für Unterpunkte keine Float-Eigenschaft */

ul.menu ul li {

float:none;

background-color: transparent;

}

/* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */

ul.menu ul li.hover, ul.menu ul li:hover {

background-color: #FFF9E4;

}

/* Zweite Ebene */

ul.menu ul {

margin:0;

padding: 0;

position: absolute;

background-color: #26383D;

border: 1px solid #FFF9E4;

display: none;

width: 180px;

}

/* Zweite Ebene anzeigen */

ul.menu li.hover ul, ul.menu li:hover ul {

display: block;

}

/* Dritte Ebene */

ul.menu li.hover ul ul, ul.menu li:hover ul ul {

display: none;

margin-left: 160px; /* Breite eines Listenelements - Überlagerung */

margin-top: -20px; /* Höhe eines Listenelements */

}

/* Dritte Ebene anzeigen */

ul.menu li.hover ul li.hover ul, ul.menu li:hover ul li:hover ul {

display: block;

}

/* Vierte Ebene */

ul.menu li.hover ul li.hover ul ul, ul.menu li:hover ul li:hover ul ul {

display: none;

}

/* Vierte Ebene anzeigen */

ul.menu li.hover ul li.hover ul li.hover ul , ul.menu li:hover ul li:hover ul li:hover ul {

display: block;

}

habe ich eingefügt zum Test, aber noch keine reaktion.

Verknüpfung vom CSS im Haupttemplate

page.stylesheet = uploads/tf/main_01.css

Wie muss ich da noch das Javascript einbinden? bzw ohne das java script müsste doch auch schon was zu sehen sein.

Okulus schrieb

Wie muss ich da noch das Javascript einbinden?

Ähm, liest Du auch Tutorials oder schnappst Du Dir nur schnell die Codeteile draus???

Auch der JavaScript-Code muss wieder im Kopf eingefügt werden um die IE6-Kompatibilität zu gewährleisten. Da mich auch immer wieder Fragen erreicht haben, wie man denn dieses JavaScript im Kopf der TYPO3-Seite einbaut zeige ich hier eine einfache Möglichkeit, dies ganz simpel per TypoScript zu realisieren:

(Quelle: mortox.de)

ich hatte das schon gelesen auch die entsprechenden zeilen in das TS zugefügt, jedoch ohne reaktion. Deshalb habe ich gefragt wie ich das einbinde, wie im Tutorial beschrieben in das TS eingefügt ist es.
Im Moment sehe ich nur eine Stichwortliste als Menu.

Bitte in Zukunft Code-Beispiele mit den bereitgestellten Codes des Forum formatieren. Diese stehen der Bequemlichkeithalber am oben Rand des zu bearbeitenden oder des neu zu verfassendes Beitrags zur Verfügung. Die erhöht die Lesbarkeit von Beipielen immens.