Hilfe bei der Einbindung eines Dropdown-Menüs

[kapuze43]

Hallo,

ich komme mit der Einbindung der Navigation in Typo3 einfach nicht klar. Nachdem ich nun stundenlang nahezu sämtliche Tutorials und Erklärungen im WWW „studiert“ habe, bin ich der Verzweiflung nahe und hoffe, dass Ihr mir weiterhelfen könnt. :cry:

Ich möchte gern die Navigation folgendes Templates in Typo3 integrieren:

Layout

CSS
HTML

Noch mal kurz zusammengefasst:

- die Navigation besteht aus dem Hauptmenü und 2-Untermenüs
- wenn ein Link aus dem Hauptmenü aktiv ist, soll dieser hervorgehoben werden (siehe Layout)
- wenn ein Link aus dem Untermenü aktiv ist, soll sowohl der Hauptmenüpunkt als auch das aktive Untermenü hervorgehoben werden (siehe Layout)

Ich danke bereits im Voraus für jegliche Hilfe. :P

[Patrizius76]

Hi,

dazu gibt es aber wirklich viele tutorials, wie man ein Menü in TYPO3 umsetzt...

Für dich zum Einstieg: Du sprichst dein Menü an mit Typoscript:

temp.deinMenu = MENU
Vorher hast du - je nachdem ob du mit Subparts & Markern, Fluid oder Templavoila arbeitest - den "Ort" deines Menüs festgelegt. Bei Templavoila heisst das z.B. du hast im HTML z.B.

<div id="deinMenu"></div>

stehen das Du nun erst mappst und dann mittels Typoscript konfigurierst.

Dann folgst du besagten Tutorials, z.B. TYPO3 – Tutorial für ein einfaches TYPO3 TMENU | Blog über Webdesign, TYPO3, Typoscript, SEO, Social Media

Viell. hilft es Dir erstmal ein einfachers Menü umzusetzen, und dann Step-byStep weiterzugehen...

Greetz

Patrizius

[kapuze43]

Hallo,

besten Dank für deine Antwort. Ich habe mein Template via TemplaVoila eingebunden, was auch, bisauf die Navigation, prima funktioniert hat.

Menüstruktur



Mein bisheriges Ergebnis - Typoscript

lib.field_main_nav = HMENU
lib.field_main_nav {

special = list
special.value = 532, 405, 540


wrap = <ul class="sf-menu">|</ul>

1 = TMENU
1 {
expAll = 1
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>
NO.stdWrap.htmlSpecialChars = 1

CUR = 1
CUR.allWrap = <li class="current">|</li>
CUR.stdWrap.htmlSpecialChars = 1

}

2 = TMENU
2 {
expAll = 1
noBlur = 1
NO.wrapItemAndSub = <li>|</li>
NO.stdWrap.htmlSpecialChars = 1

CUR = 1
CUR.wrapItemAndSub = <li class="current">|</li>
CUR.stdWrap.htmlSpecialChars = 1

ACT = 1
ACT < .CUR
}

3 < .2
3.wrap = <ul>|</ul>
}Ergebnis




Leider ist alles durcheinander und nicht mal annährend so, wie es sein soll. Jquery ist korrekt eingebunden, ein Konflikt sollte ebenso wenig bestehen.

Mir erschließt sich die Logik einfach nicht, obwohl ich intensiv die Dokumentation gelesen und ewig "rumprobiert" habe. Ich bin scheinbar zu doof dafür, obwohl ich normalerweise mit Skript-, Konfigurations- bzw. Programmiersprachen bestens vertraut bin. Es ist zum Verzweifeln.

[Patrizius76]

hey,


special = list
special.value = 532, 405, 540


bedeutet, dass du nur die Seiten mit den IDs 532,405,540 im Menü darstellen willst. wenn sich die Unordnung darauf bezieht schreib stattdessen


entryLevel = 0


um mit der ersten Seite im Seitenbaum zu beginnen. expAll muss auch nicht im 2 Level stehen...einfacher ist es meistens, die erste ebene zu kopieren. Probier mal
2 < .1

Poste doch mal deinen Link, dann ist es einfacher zu helfen

Greetz

Patrizius

[kapuze43]

Ich hab' leider keinen Link, weil ich die Seite nur lokal via xampp existiert. Später möchte ich nur bestimmte Menüs anzeigen, deshalb hatte ich schon mal probiert, ob es so funktioniert wie gedacht. Beim ganzen Rumprobieren und Ändern, habe ich tatsächlich nicht gesehen, dass ich UIDs falsch angeordnet habe.

Die Startseite habe ich mal rausgenommen und nur Menuepunkt1 (id=540) und Menuepunkt2 (id=532) eingetragen.

Das Wichtigste allerdings - mich hat noch mal die Motivation gepackt und der Typoscriptcode sieht nun deutlich anders. Und das schönste ist - alles funktioniert perfekt, bisauf eine kleine Sache. Wenn ich eine Seite der 3. Ebene aufrufe, wird die darüberliegende Ebene als aktiv markiert. (



Menuepunkt2 - Sub 1 - Subsub1 ist eigentlich aktiv und nicht Menuepunkt2 - Sub 1.

Hier der Typoscriptcode:

lib.field_main_nav = HMENU
lib.field_main_nav {

wrap = <ul class="sf-menu">|</ul>

special = list
special.value = 540, 532


1 = TMENU
1 {
expAll = 1
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>

CUR = 1
CUR.wrapItemAndSub = <li class="current">|</li>

ACT = 1
ACT < .CUR

}

2 < .1
2 {
wrap = <ul>|</ul>

ACT = 1
ACT < .CUR
}

3 < .1
3 {
wrap = <ul>|</ul>

ACT = 1
ACT < .CUR
}
}

Falls ich das noch hinkriegen sollte, küss ich die Welt. :D Schon mal vielen Dank dafür, dass du so geduldig versuchst mir blutigen Anfänger zu helfen.

[Havenot]

Wenn ich das richtig sehe, müsste in deinem Problemfall die 2 Ebene die Klasse "current" bekommen, richtig?

2 < .1
2 {
wrap = <ul>|</ul>

ACT = 1
ACT < .CUR
}

Hier schreibst du alle definierten Eigenschaften aus der ersten Ebene auf die 2, du müsstest in der 2 Ebene neue Eigenschaften vergeben. (für CUR und ACT) z.B. so

2 < .1
2 {
wrap = <ul>|</ul>

ACT = 1
ACT.wrapItemAndSub = <li class="neuACT">|</li>

CUR = 1
CUR.wrapItemAndSub = <li class="neuCUR">|</li>
}

lg Felix

[kapuze43]

Eeeeeeeendlich hat's Klick gemacht. Ich danke euch beiden. Falls es jemand interessieren sollte, hier das funktionierende Ergebnis:

lib.field_main_nav = HMENU
lib.field_main_nav {

wrap = <ul class="sf-menu">|</ul>




1 = TMENU
1 {
expAll = 1
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>

CUR = 1
CUR.wrapItemAndSub = <li class="current">|</li>

ACT = 1
ACT < .CUR

}

2 = TMENU
2 {
wrap = <ul>|</ul>
CUR = 1
CUR.wrapItemAndSub = <li class="current">|</li>
expAll = 1
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>

}

3 = TMENU
3 {
wrap = <ul>|</ul>
CUR = 1
CUR.wrapItemAndSub = <li class="current">|</li>
expAll = 1
noBlur = 1
NO = 1
NO.wrapItemAndSub = <li>|</li>

}
}