Hallo,
ich bin am Anfang von typo3 und habe ein Problem beim Menü.
Ich benutze Version 6.1.8 und habe ein Menü erstellt. Bei diesem Menü bekomme ich es leider nicht richtig hin, dass die aktive Seite "markiert wird" und das hirarchisch nach unten.
Ich hoffe ich habe mich einigermaßen verständlich ausgedrückt, her mal mein Code.
Typoscript:
MENUE = HMENU
MENUE {
1 = TMENU
1 {
wrap = <ul>|</ul>
noBlur = 1
NO = 1
NO {
wrapItemAndSub = <li> | </li>
linkWrap = | ||*| | ||*| |
ATagBeforeWrap = 1
}
IFSUB = 1
IFSUB {
wrapItemAndSub = <li> | </li>
linkWrap = | ||*| | ||*| |
ATagBeforeWrap = 1
}
ACT < .NO
ACT = 1
ACTIFSUB < .IFSUB
}
2 = TMENU
2 {
wrap = <ul class="zweite"> | </ul>
noBlur = 1
NO = 1
NO {
wrapItemAndSub = <li> | </li>
linkWrap = | ||*| | ||*| |
ATagBeforeWrap = 1
}
}
}
Css:
#menue {
position: absolute;
top:-20px;
left:0px;
font-size:40px;
height:103px;
width:700px;
float:left;
}
.zweite{
position: absolute;
bottom:-10px;
left:6px;
font-size:23px;
}
#menue ul{
float:left;
display:block;
}
#menue li{
float:left;
display:block;
}
#menue a:link, #menue a:visited{
color:white;
text-decoration:none;
}
#menue a:hover, #menue a:focus, #menue a:active {
color:black;
text-decoration:none;
background-color:white;
}
Mir ist klar, dass ich irgendwie das Menü Skript noch nicht richtig kapiert hab.
Habe schon viel mit dem css rumprobiert,,weswegen es etwas "unsauber" aussieht.
Könnt ihr mir helfen?
Vielen Dank
Mit der Zeile "ACT < .NO" erreichst du erst einmal nur eine 1:1 Kopie des Normalzustands, der aktive Link wird also genau so gerendert, wie die normalen/inaktiven.
Ergänze darunter mal die Zeile
ACT.wrapItemAndSub = <li class="active">|</li>
So bekommt der aktive Menüeintrag eine eigene Klasse, die dann über CSS gestyled werden kann.
Eine Kopie des Zustandes der ersten Eben möchte ich ja. Es soll sowohl die erste Ebene als auch die zweite Ebene markiert sein.
So?
MENUE = HMENU
MENUE {
1 = TMENU
1 {
wrap = <ul>|</ul>
noBlur = 1
NO = 1
NO {
wrapItemAndSub = <li> | </li>
linkWrap = | ||*| | ||*| |
ATagBeforeWrap = 1
}
IFSUB = 1
IFSUB {
wrapItemAndSub = <li> | </li>
linkWrap = | ||*| | ||*| |
ATagBeforeWrap = 1
}
ACT < .NO
ACT.wrapItemAndSub = <li class="active">|</li>
ACT = 1
ACTIFSUB < .IFSUB
}
2 = TMENU
2 {
wrap = <ul class="zweite"> | </ul>
noBlur = 1
NO = 1
NO {
wrapItemAndSub = <li> | </li>
linkWrap = | ||*| | ||*| |
ATagBeforeWrap = 1
}
}
Das zusätzliche css
#active {
color:black;
text-decoration:none;
background-color:white;
}
Das klappt nicht. Was mache ich falsch? Vielen Dank.
Du solltest dich noch mal mit dem Konzept der verschiedenen Zustände der menu items befassen,
und in deinem TS die richtige Reihenfolge einhalten -
momentan ist es so, das Seiten mit Unterseiten niemals als aktiv gekennzeichnet werden,
weil du erst ACT definierst, danach aber ACTIFSUB einfach aus IFSUB kopierst,
ohne die entsprechend aktiv-Klasse zu vergeben.
Wenn deine zweite Ebene identisch zur ersten sein soll,
wäre es am sinnvollsten, sie einfach als Kopie zu erstellen, also
2 < .1
2.wrap = <ul class="zweite"> | </ul>
Dann hat diese Ebene auch alle Menüzustände wie die erste Ebene,
momentan gibt es da ja nur NO
Ich fürchte ich versteh es nicht.
Ich habe den entsprechenden Teil im TS sporadisch angepasst wie folgt:
// ACT < .NO
ACT.wrapItemAndSub = <li class="active">|</li>
ACTIFSUB < .ACT
// ACT = 1
// ACTIFSUB < .IFSUB
Das klappt nicht. Ich steh echt auf dem Schlauch. Wie muss es denn aussehen?
Danke
Keiner da, der mir helfen kann?
Ich versteh es einfach nicht.
Ich habe jetzt folgendes:
MENUE = HMENU
MENUE {
1 = TMENU
1 {
wrap = <ul>|</ul>
noBlur = 1
NO = 1
NO {
wrapItemAndSub = <li> | </li>
linkWrap = | ||*| | ||*| |
ATagBeforeWrap = 1
}
Hier definiere ich meines Wissens nach den Normalzustand.
ACT = 1
ACT {
wrapItemAndSub = <li class="aktiv"> | </li>
linkWrap = | ||*| | ||*| |
ATagBeforeWrap = 1
}
Hier definiere ich doch jetzt, dass die aktiven Seite der Klasse "aktive" zugehören oder nicht?
IFSUB = 1
IFSUB {
wrapItemAndSub = <li> | </li>
linkWrap = | ||*| | ||*| |
ATagBeforeWrap = 1
}
Hier definiere ich den Zustand von Seiten mit Unterseiten oder?
ACTIFSUB = 1
ACTIFSUB {
wrapItemAndSub = <li class="aktiv"> | </li>
linkWrap = | ||*| | ||*| |
ATagBeforeWrap = 1
}
}
und hier definiere ich den aktiven Zustand von Seiten mit Unterseiten, oder nicht?
2<.1
2 = TMENU
2 {
wrap = <ul class="zweite"> | </ul>
noBlur = 1
}
}
Hier kopiere ich die Zustände in die zweite Ebene und setze zusätzlich in der zweiten Ebene die Klasse "zweite" ein, richtig?
Leider werden wohl nicht alle </li> gesetzt. Aber warum? Jemand ne Idee?
Hier der Quellcode der Seite:
<div id="menue">
<ul>
<li class="aktiv">
<a href="index.php?id=12" >
1
</a>
<ul class="zweite">
<li class="aktiv">
<a href="index.php?id=12" >
1.1
</a>
</li>
<li>
<a href="index.php?id=5" >
1.2
</a>
</li>
</ul>
</li>
<li>
<a href="index.php?id=7" >
2
</a>
</li>
<li>
<a href="index.php?id=4" >
3
</a>
</li>
<li>
<a href="index.php?id=15" >
4
</a>
</li>
</ul>
</div>
Wieso? Sind doch alle da?
Vergiss nicht, dass die 2. Ebene als Liste in der Liste erscheint. Dann rück' deinen Code einfach mal sauber ein, dass hat schon so manches mal geholfen...
Aber was läuft dann schief?
Warum werden mir die aktiven Seiten nicht markiert???
Was meinst du denn eigentlich mit "Warum werden mir die aktiven Seiten nicht markiert???"?
Laut deinem vorigen Post werden die aktiven Menüpunkte im HTML mit der Klasse aktiv gekennzeichnet,
das ist doch, was du erreichen wolltest?
Man sieht davon nichts im Browser?
Vielleicht solltest du die Klasse .aktiv per CSS anders stylen als die normalen Listeneinträge...
Großartig.
Ich habe zwar soweit alles richtig im css eingetragen was das Format angeht aber habe das Element nicht als Klasse definiert sondern mit einer #...
Jetzt mit einem . davor klappt alles wie es sollte.
Menü kann ich nun abhaken.
Vielen Dank für die Hilfe von einem Neuling, so macht es dann auch Spaß sich in typo3 einzuarbeiten.
Und jetzt gehst du noch zum letzten Post von jenses aus, klickst auf den Schraubenschlüssel und markierst es als Lösung, dann kann der Thread als geschlossen betrachted werden 😉
Naja aber es ist ja nicht die Lösung für das Ursprungsproblem...
Trotzdem als Lösung markieren?
Stimmt, das eigentliche Problem war ja ein anderes... tu wie du willst, das Problem war ja eher ... individueller Natur 😉