Zum Inhalt springen

Menü mit Flyout und Position halten

Erstellt am 9. Mai 2008 · 2 Antworten · letzte Antwort am 14. Mai 2008

Tags: HTML & CSS, Frage

xerxes78 ·

Hallo Leute,

nachdem ich 2 Tage damit verbracht habe, das Internet nach Infos zu meiner Aufgabenstellung abzugrasen, wende ich mich vertrauensvoll an die Community. Ich versuche das Problem mal zu beschreiben:

Ich möche ein vertikales Menü, welches so arbeitet wie das hier auf typo3.net (also per Klick auf Ebene 1 öffnet sich die darunterliegende Ebene 2 usw..).

ZUSÄTZLICH soll ein Flyoutmenü als Alternative Navigation her, wie z.B. hier: http://www.l-base.de/ > Menüs > Layermenü Vertikal CSS

Falls im Flyout dann auf eine untere Ebene navigiert wird, soll der Seitenbaum (wie typo3.net) entsprechend aufklappen - und die richtige Seite anzeigen.

Da ich die Seite von einer statischen Version übertrage, möchte ich die Funktionalität erhalten. Bisher war es mit Java-Script und einem List-Menü gelöst. Ich könnte die bisherige Variante auch übernehmen, dazu fehlt mir aber ein Kniff:

Kann ich bei der Menüdefinition den wrap auch für einen Status setzen?

2 = TMENU
2{
noBlur = 1
expAll = 1
ACT = 1
ACTIFSUB = 1
wrap = <ul> |</ul>
NO{
expAll = 1
wrapItemAndSub = <li class="sichtbar">|</li>
#ATagParams = class='submenuLinkV'
}
ACT{
expAll = 1
wrap = <ul> |</ul>
wrapItemAndSub = <li class="sichtbar">|</li>
#ATagParams = class='submenuLinkActV'
}
ACTIFSUB{
expAll = 1
wrapItemAndSub = <li class="sichtbar">|</li>
#ATagParams = class='submenuLinkActV'
}
}

In o.g. Typoscript sollte Zeile 7 wegfallen und je nachdem ob "ACT" oder "NO" gerade der aktuelle Zustand ist mit der "class='sichtbar'" umschlossen werden (der TS hat einige überflüssige Definition weil es meine Arbeitsversion ist).

Gibt es da was?

Sorry für den langen Text, aber ich wollte es genau beschreiben.

Für Hilfe wäre ich sehr dankbar!

Steffen

xerxes78 ·

Hallo Kitsunet,

danke für den Hinweis. Ein normaler "wrap = ..." innerhalb des ACTIFSUB tut aber nicht!? Denn kann ich doch nur "statuslos" einsetzen? (Siehe im Code wie Zeile Nr.8 ) Sorry das ich frage, wo im TS sollte ich den wrap deiner Meinung nach einfügen? Hier mein vollständiges Menü:

## Menue
lib.menu_1 = HMENU
lib.menu_1 {
entryLevel = 0
expAll = 1
1 = TMENU
1{
wrap = <ul id='menu'>|</ul>
noBlur =1
CUR = 1
ACT = 1
ACTIFSUB = 1
NO{
wrapItemAndSub = <li>|</li>
stdWrap {
prepend = TEXT
prepend {
value = <img border="0" src="fileadmin/template/bilder/punkt.gif" />
}
}
}
CUR {        
ATagParams = style="background-color: #e5ebf1;"
wrapItemAndSub = <li>|</li>
stdWrap {
prepend = TEXT
prepend {
value = <img border="0" src="fileadmin/template/bilder/punkt.gif" />
}
}
}
ACT{
expAll = 1
wrap = <ul> |</ul>
wrapItemAndSub = <li>|</li>
}
ACTIFSUB{
expAll = 1
wrapItemAndSub = <li>|</li>
stdWrap {
prepend = TEXT
prepend {
value = <img border="0" src="fileadmin/template/bilder/punkt2.gif" />
}
}
}
}
2 = TMENU
2{
noBlur = 1
CUR = 1
ACT = 1
ACTIFSUB = 1
wrap = <ul> |</ul>
NO{
wrapItemAndSub = <li>|</li>
stdWrap {
prepend = TEXT
prepend {
value = <img border="0" src="fileadmin/template/bilder/punkt.gif" />
}
}
}
CUR {        
ATagParams = style="background-color: #e5ebf1;"
wrapItemAndSub = <li>|</li>
stdWrap {
prepend = TEXT
prepend {
value = <img border="0" src="fileadmin/template/bilder/punkt.gif" />
}
}
}
ACT{
expAll = 1
wrap = <ul> |</ul>
wrapItemAndSub = <li>|</li>
}
ACTIFSUB{
expAll = 1
wrapItemAndSub = <li>|</li>
stdWrap {
prepend = TEXT
prepend {
value = <img border="0" src="fileadmin/template/bilder/punkt2.gif" />
}
}
}
}
3 = TMENU
3{
noBlur = 1
CUR = 1
ACT = 1
ACTIFSUB = 1
wrap = <ul> |</ul>
NO{
wrapItemAndSub = <li>|</li>
stdWrap {
prepend = TEXT
prepend {
value = <img border="0" src="fileadmin/template/bilder/punkt.gif" />
}
}
}
CUR {        
ATagParams = style="background-color: #e5ebf1;"
wrapItemAndSub = <li>|</li>
stdWrap {
prepend = TEXT
prepend {
value = <img border="0" src="fileadmin/template/bilder/punkt.gif" />
}
}
}
ACT{
expAll = 1
wrapItemAndSub = <li>|</li>
stdWrap {
prepend = TEXT
prepend {
value = <img border="0" src="fileadmin/template/bilder/punkt.gif" />
}
}
}
ACTIFSUB{
expAll = 1
wrapItemAndSub = <li>|</li>
}
}
}

Danke,

Steffen

P.S.: Ich weiss: Ein bischen Einrücken würde nicht schaden ;-)