Hallo,
ich hoffe ihr könnt mir vllt weiterhelfen. Bin ein Neuling in Sachen TypoScript.
Ich habe folgenden HTML- Code für eine Top-Navigation:
<div id="menu">
<ul>
<li class="submenu"><span>Services</span>
<ul>
<li class="first"><a href="#">Sed imperdiet</a></li>
<li><a href="#">Libero felis dolor</a></li>
<li class="submenu"><span>Pulvinar duis</span>
<ul>
<li class="first"><a href="#">Consequat</a></li>
<li><a href="#">Nullam aliquam ridiculus</a></li>
<li><a href="#">Sed imperdiet adipiscing lorem</a></li>
<li><a href="#">Feugiat sed imperdiet</a></li>
<li class="last"><a href="#">Libero etiam</a></li>
</ul>
</li>
<li><a href="#">Cras nulla ridiculus</a></li>
<li><a href="#">Feugiat imperdiet</a></li>
<li class="last"><a href="#">Libero felis dolor</a></li>
</ul>
</li>
<li><a href="#">Clients</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">Press Room</a></li>
<li><a href="#">Careers</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
<br class="clearfix" />
</div>
Folgenden TypoScript Code habe ich geschrieben:
lib.navigation = HMENU
lib.navigation {
wrap = <ul>|</ul>
1 = TMENU
1 {
expAll = 1
noBlur = 1
NO.wrapItemAndSub = <li>|</li>|*|<li>|</li>|*|<li class="last">|</li>
NO.stdWrap.htmlSpecialChars = 1
CUR = 1
CUR < .NO
ACT = 1
ACT < .CUR
IFSUB=1
IFSUB.wrapItemAndSub = <li class = "submenu">|</li>
}
2 = TMENU
2 {
wrap = <ul>|</ul>
NO.wrapItemAndSub = <li class = "first">|</li>|*|<li>|</li>|*|<li class="last">|</li>
NO.stdWrap.htmlSpecialChars = 1
CUR = 1
CUR < .NO
ACT = 1
ACT < .CUR
IFSUB=1
IFSUB.wrapItemAndSub = <li class="submenu">|</li>
}
3 < .2
}
Funktioniert auch soweit. Leider verzerrt sich das Menu wenn ich auf einen anderen Menüeintrag klicke ( außer Startseite). Alle Seiten verwenden das selbe Template. Leider weis ich keinen Ausweg. Habe schon einiges versucht, leider bisher ohne Erfolg. Ich hoffe es kann mir jemand weiterhelfen.
Vielen Dank
Viele Grüße
Tobias
Denke dass ich nur einen Fehler bei den wraps reingebracht hab. Wenn ich auf der 2. Ebene wrap = <ul>|</ul> benutze verschiebt es das Menü nicht, die Unterpunkte werden nur alle in einer Reihe angezeigt.
Hoffe das mir jemand einen Tipp geben könnte, was am TypoScript- Code falsch ist. Für jede Hilfe bin ich sehr dankbar
Viele Grüße
Tobias
Was genau meinst du mit "verzerrt/verschiebt"? Ist die finale HTML-Ausgabe so wie gewünscht? Eventuell ein CSS-Problem?
Hey, danke für die Antwort. Der CSS- Code ist in Ordnung. Die Navigation wird auch richtig angezeigt wenn ich mich auf der Startseite befinde. Wenn ich jedoch auf eine andere Seite klicke verschiebt sich das Menu. Alle Einträge werde sichtbar angezeigt. Es verzerrt sich. Denke das es am TypoScript- Code liegt. Vllt kannst du mal drüberschaun.
Viele Grüße
Also das TS produziert ein valides Menü.
Ein Link zur Seite oder Screenshots wären hilfreich. Gibt es einen Unterschied zwischen Startseite und den anderen Seiten?
Das alle Einträge sichtbar sind ist normal, da du es in deinem TS so angegeben hast --> expAll
Hi,
also ich habe jetzt mal einen Screenshot gemacht. Vorher, wenn ich mich auf der Startseite befinde und nachher, wenn ich auf einen Menüeintrag geklickt habe.
Viele Grüße
Ich würde einiges wetten! DAS ist ein CSS-Problem!
außerdem:
Wenn CUR und ACT identisch sind wie NO, dann brauchst Du sie auch nicht zu kopieren!?
CUR = 1
CUR < .NO
ACT = 1
ACT < .CUR
und:
2 < .1
2.wrap = <ul>|</ul>
3 < .2
sollte genügen.
Hallo,
ich habe jetzt nochmal den css- Code überprüft. Dieser passt soweit.
Also passt wohl irgendetwas mit dem TypoScript - Code nicht. Wenn ich Ebene 2 nicht als T MENU deklariere verschiebt es mir die Einträge nicht. Leider werden dann logischerweise auch keine Unterpunkte angezeigt. Hoffe es kann mal jemand den TypoScript- Code überprüfen. Ist wahrscheinlich nur ein kleiner Fehler.
Vielen Dank schonmal
Gruß Tobi
Ich schätze mal, dass es damit zusammenhängt, dass du ein komplettes wrap mit UL um alle Ober und Untermenüpunkte machst um dann in level 2, innerhalb dieses äußeren UL, noch ein UL aufzureißen.
Ich gehe davon aus, dass die CSS-Eigenschaften des UL-Tags dann Ihr übriges tun.
Habe jetzt mal den 2. ul- Wrap auf Ebene 2 weggelassen und die Dropdown- Funktion greift nicht mehr, da jetzt keine Submenüs mehr vorhanden sind.
Jetzt erscheinen alle Menüeinträge der 1. und 2. Ebene in einer Reihe. Also noch nicht das gewünschte Ergebnis
Viele Grüße
Tobias
Nein, der TS-Code ist wohl richtig.
Wenn ich mal einen Zugriff darauf hätte könnte ich es Dir sicher eher sagen!
häng doch auch mal Deine CSS als Datei an!
Hallo,
anbei die CSS sowie die JS- Datei. Es handelt sich übrigens um ein jquery- Menü
Für ein solches Menü brauchst Du doch kein JS, das kannst Du doch nur mit CSS machen!?
Experimentier mal mit dem rum:
#menu {
height: 38px;
padding: 8px 20px 0 20px;
text-decoration: none;
font-family: 'Signika', sans-serif;
font-size: 16px;
color: #FFFFFF;
z-index:2;
position:relative;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: 38px;
position:absolute;
left:1px;
top:1px;
width:180px;
}
#menu ul li { display:block; }
Diese total unwichtige Info, dass es sich nicht um ein reines CSS-Menü handelt sondern auch noch irgendein Javascript dahinter steckt sagst du uns nach 4 Tagen und 15 Posts? #angry#
Naja, nachdem es nun raus ist :o sollte es nun für TYPOSCRIPT- Erfahrene ja nicht allzuschwer sein den TypoScript- Code zu erstellen.
Bin sehr gespannt wo der Fehler lag.
Viele Grüße
Tobi
Folgende Optionen:
1. Du hast bereits einen funktionierenden HTML-Code mit CSS der so ist wie du es gerne hättest, aber nach dessen Umsetzung in Typo3 passt es nicht. Dann vergleich doch einfach mal den HTML-Output deines Menüs von Typo3 mit deiner HTML-Vorlage ob dieser identisch ist, und wenn nicht, such nach dem Problem.
2. Du hast dein Menü direkt in Typo3 aufgebaut. Dann Versuch dein Menü zuerst rein in HTML aufzubauen und setze diesen Code anschließend in Typo3 um
3. Wenn du möchtest, dass hier nicht nur geraten wird, dann solltest du einen Link zu deiner Seite posten, wo man sich deinen Output live ansehen kann. Oft helfen HTML/CSS-Debugger wie z.b. Firebug für Firefox weiter
Generell "verschiebt" dir Typo3/TypoScript keine Menüpunkte, da diese rein über HTML/CSS oder u.U. auch per Javascript positioniert werden, d.h. wenn dein mit Typo3/TypoScript generierter Code identisch ist mit deiner reinen HTML-Vorlage, dann sollte das eigentlich passen, ausser eine deiner CSS-Anweisungen ist nicht treffend genug definiert und wird mit dem CSS vom RTE überschrieben, das habe ich aber schon lange nicht mehr erlebt.