Hallo,
ich habe nun etliche Beiträge durchforstet aber nicht wirklich ne Lösung für mein Problem gefunden. Ich möchte ganz einfach, dass der gerade aktive Menüpunkt einen weißen Hintergrund und eine andere Schriftfarbe hat.
/* Menü oben */
.menu {
position:absolute;
width:1030px;
text-align:center;
margin:-20px 0 0 80px;
clear:both;
}
.menu a {
text-decoration: none;
color: #ffffff;
width:100px;
height:50px;
padding:5px 20px 5px 20px;
font-family:"Arial", Helvetica, sans-serif;
font-weight:bold;
font-size:14px;
}
.menu a:hover {
position:relative;
color: #991f36;
background-color:#ffffff;
width:100px;
height:50px;
}
.menu a:active {
color:#991f36;
background-color:#ffffff;
width:100px;
height:50px;
}
## Menu [Begin]
lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.1 = TMENU
lib.mainMenu.1.NO {
allWrap =
}
## Menu [End]
Und ich habe das ganze mit TemplaVoila umgesetzt.
Aber irgendwie klappt das aktive Menü nicht. Ich habe zwar in verschiedenen Beiträgen gesehen, dass bei allWrap noch die Klasse .menu eingefügt wurde, aber ich habs bei mir nicht hinbekommen. Mit TS bin ich noch nicht so bewandert.
Was genau fehlt denn??
Hallo.
Glaub, das Problem liegt momentan in der Unterscheidung der Zustände und der Unterschedung, wo ein Link den Zustand hat.
Die Zustände in CSS:
:link = für Verweise zu noch nicht besuchten Seiten
:visited = für Verweise zu bereits besuchten Seiten
:focus = für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)
:hover = für Elemente, während der Anwender mit der Maus darüber fährt (CSS 2.0)
:active = für gerade angeklickte Elemente
Die Zustände in TYPO3/TypoScript:
NO - Die Standardausgabe des Menüelements mit dem Status "Normal". Dies ist bei allen Menüs vorrausgesetzt.
ACT - Konfiguration für Menüelemente, die in der rootLine gefunden wurden.
CUR - Konfiguration für das Menüelement der aktuellen Seite.
Was ist bei Dir also "gerade aktive Menüpunkt"? Der, der gerade angeklickt ist (CSS, :active)? Der, auf dem die Maus gerade ist (CSS, :hover)? Der, in dessem Unterbaum sich der Besucher gerade befindet (TYPO3, ACT)? Oder der, auf dem sich der Besucher gerade befindet (TYPO3, CUR)?
Viele Grüße
Julian
Der aktive Menüpunkt ist der, auf dem sich der Besucher gerade befindet!
Wie aber löse ich es über TypoScript mit CUR?
Du hast Dein TMENU derzeit als lib.mainMenu.1 definiert. Damit kannst Du innerhalb dieses Objekts nun die Menüzustände (TSref) konfigurieren. Was genau konfigurierbar ist, steht in der TSref unter TMENUITEMS.
Das einfachste dürfte in Deinem Fall sein, einen Paramter für a-Tags zu setzen, über den Du eien Klasse einfügst:
lib.mainMenu.1.CUR.ATagParams = class="aktiv"
Viele Grüße
Julian
Ich habe die Zeile in der Art eingefügt:
lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.1.CUR.ATagParams = class="aktiv"
lib.mainMenu.1 = TMENU
lib.mainMenu.1.NO {
allWrap =
}
Klappt leider nicht.
Jetzt verstehe ich aber nicht, ob mit der class die Klasse aus meiner css-Datei gemeint sein soll, denn dann müsste ja menu stehen (was aber auch nicht funktioniert), oder ob es tatsächlich nur ein boolean-Typ ist.
Nebenbei: Warum funktioniert das hover aus meiner css und das active nicht??
Muss man denn überhaupt das über TS lösen oder gibt es für Typo3 nicht doch eine Lösung über css?
ezra schrieb
Muss man denn überhaupt das über TS lösen oder gibt es für Typo3 nicht doch eine Lösung über css?
Es muss eine Lösung via TS sein. Der active-Zustand von CSS greif nur für den Fall, dass ein Link gerade angeklickt ist (also die Maus sich auf dem Link befindet und die Maustaste gerade gedrückt ist). Du suchst aber ja eine wie die aktuell aufgerufene Seite anders formatiert wird.
Es ist daher nötig, dass Du über den CUR-Zustand des Menüpunktes mittels TS diesen kennzeichnest, damit er via CSS selektierbar (und damit formatierbar) wird.
Eine Möglichkeit ist via ATagParams. Hier müssten nur Deine Zeilen 3+4 getauscht werden. Aktuell setzt Du eine Einstellung, überschreibst diese aber in der nächsten Zeile.
Als anschauliches Beispiel:
Du hast ein Blatt Papier, schreibst auf die Rückseite (CUR) etwas (Zeile 3). Dann nimmst Du Dir ein neues Blatt Papier (Zeile 4) und schreibst auf die Vorderseite (NO) etwas (Zeile 5). Und dann steht plötzlich auf der Rückseite des Blattes nichts mehr...
Dein allererster Ansatz (mit allWrap) in Verbindung mit CSS würde ansich auch klappen. Jedoch hast Du
a) dem allWrap keinen Wert zugewiesen (könnte z.B. <span class="menu">|</span> sein
b) den allWrap für den NO-Zustand definiert, der für alle Menüpunkte gelten würde, statt nur für den aktuellen (CUR).
Hoffe, ich bin nicht zu ausführlich. Bin aber der Meinung, dass es sinnvoller ist, in einer Weise zu helfen, dass mana uch versteht, warum eine Lösung so ist, statt nur schnell die konkrete Lösung zugesteckt zu bekommen.
Ich finde es richtig toll, ich möchte es ja auch verstehen. TS ist für mich noch ziemliches Neuland. Ich dachte, dass mit TV alles selber generiert wird, wenn ich meinen HTML und CSS Code entsprechend mappe.
Die Zeilen habe ich ausgetauscht, funktioniert leider auch nicht. Dann habe ich es auch mal mit ACT versucht, den css Klassennamen bei :active verändert (in .menu-item-cur) etc.
Irgendwo ist noch der Wurm drin. Ich weiß nicht ob es die Seitenbaumstruktur ist oder beim Mappen des Menus etwas gefehlt hat.
Eigentlich sollte es klapppen mit:
/* Menü oben */
.menu {
position:absolute;
width:1030px;
text-align:center;
margin:-20px 0 0 80px;
clear:both;
}
.menu a {
text-decoration: none;
color: #ffffff;
width:100px;
height:50px;
padding:5px 20px 5px 20px;
font-family:"Arial", Helvetica, sans-serif;
font-weight:bold;
font-size:14px;
}
.menu a:hover {
position:relative;
color: #991f36;
background-color:#ffffff;
width:100px;
height:50px;
}
.menu a:active {
color:#991f36;
background-color:#ffffff;
width:100px;
height:50px;
}
.menu a.aktiv {
color:#991f36;
background-color:#ffffff;
width:100px;
height:50px;
}
lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.1 = TMENU
lib.mainMenu.1.CUR.ATagParams = class="aktiv"
Zur Fehlersuche:
Wird im HTML-Quelltext class="aktiv" überhaupt erzeugt? (TYPO3-Caches geleert?)
Ich hatte bisher im HTML-Quelltext die Klasse menu erzeugt
<div class="menu"> </div>
und über TV gemappt.
Wo und wie soll das "aktiv" im Quelltext stehen?
Das wundert mich jetzt ehrlich gesagt sehr, dass der Aufruf von menu nicht reichen sollte.
Wie TV mappt Du auf/in das DIV doch Inhalt. In diesem Fall sollte es lib.mainMenu sein. Wenn Du die Seite nuna ufrufst, sollte TYPO3 lib.mainMenu mit HTML-Code für das Menü gefüllt haben und entsprechend Deines Mappings passend eingesetzt haben. D.h. im Quelltext Deiner Seite, wie Du sie im browser aufrufst, sollte nun nicht mehr nur '<div class="menu"></div>' stehen, sondern im DIV noch bisschen mehr. Und dort sollte die Klasse aktiv auch auftauchen.
Wenn ich die Seite über den Browser aufrufe und ins Quelltext gehe, erscheint dieses im Abschnitt menu:
<div class="menu">
<a onfocus="blurLink(this);" href="index.php?id=24">Home</a>
<a onfocus="blurLink(this);" href="index.php?id=10">Über uns</a>
<a onfocus="blurLink(this);" href="index.php?id=9">AGB</a>
<a onfocus="blurLink(this);" href="index.php?id=8">Impressum</a>
<a onfocus="blurLink(this);" href="index.php?id=5">Kontakt</a>
</div>
Ich raff das einfach nicht, class="aktiv" wird gar nicht erzeugt.
Im Template, in der HTML und in der CSS scheint alles korrekt zu sein, ich habe das ganze nochmal gemappt, der Cache wird oft genug geleert!.
Vielen Dank für Deine Hilfe, aber das Problem hier fängt langsam an mich zu nerven.
Ahhh, ich sollte aufpassen, wenn ich in fremden TS rumarbeite. :o
Alle Menü-Zustände außer NO erfordern erst eine Aktivierung. Die hatte ich übersehen. (Zeile 4)
lib.mainMenu = HMENU
lib.mainMenu.entryLevel = 0
lib.mainMenu.1 = TMENU
lib.mainMenu.1.CUR = 1
lib.mainMenu.1.CUR.ATagParams = class="aktiv"
es hat geklappt 😃
Vielen lieben Dank
Kannst du mir noch kurz erklären, warum das vorher noch =1 gesetzt werden muss?
ezra schrieb
Kannst du mir noch kurz erklären, warum das vorher noch =1 gesetzt werden muss?
Eher zwischen den Zeilen steht es ist der TSref
Ich versuch's mal für TS-Neuländer:
TS wird von TYPO3 in ein mehrdimensionales assoziatives PHP-Array umgewandelt. Bei der Seitenerzeugung greifen dann verschiedene Funktionen auf dieses Array (bzw. Arrays aus diesem Array) zu, lesen die Werte aus und verwerten ihren Inhalt.
Die ersten beiden Zeilen Deines TS würden wie folgt in PHP abgebildet:
array(
'lib.' => array(
'mainMenu' => 'HMENU',
'mainMenu.' => array(
'entryLevel' => 0,
)
)
);
Beachte hier mal die Schlüssel, die mit "main" beginnen - einer endet mit Punkt, einer ohne.
Die Variante ohne Punkt bestimmt oft, ob bzw. wodurch etwas verarbeitet werden soll. Im Beispiel stößt eine Funktion auf einen Schlüssel mit dem Wert "HMENU" und übergibt die Konfiguration (das Array mainMenu.) an eine Funktion zur Verarbeitung.
Für einige Eigenschaften gibt es lediglich einen Ein-/Ausschalter, der in TS durch 0/1 ausgedrückt wird. Zum Beispiel für die Menüzustände. Daher ist es erst nötig, den Zustand zur Verarbeitung zu aktivieren (CUR=1), damit dann die Eigenschaften für die Verarbeitung (CUR.) entsprechend an eine Funktion übergeben werden.
Ist vielleicht nicht 100% korrekt so, aber vom Prinzip sollte die Erklärung passen. Die Seitenerzeugung und TS sind natürlich etwas umfangreicher als die paar Zeilen erklären können.
Hallo
Dieser Thread hat mir sehr viel geholfen - Wollte dies einfach noch loswerden....
Das Problem war auch bei mir as a:active, welches nicht den gewünschen Effekt, eben das Anzeigen der aktuellen Seite, hervorbrachte. Mit dieser Anleitung klappe es dann. Vielen Dank!