Ich habe bisher das Template von http://luiszuno.com/blog/downloads/nova-html-template in TemplaVoila gemappt und knabbere am mitgelieferten Hauptmenu (Superfish) herum.
Mein TS Code zum Menü ist derteit wie folgt:
lib.navigation = HMENU
lib.navigation {
wrap = <ul id="nav" class="sf-menu">|</ul>
1 = TMENU
1 {
expAll = 1
noBlur = 1
NO = 1
NO.allWrap= <li>|</li>
CUR = 1
CUR.allWrap = <li class="current-menu-item">|</li>
}
2 = TMENU
2 {
expAll = 1
noBlur = 1
NO.wrapItemAndSub = <li>|</li>
CUR = 1
CUR.wrapItemAndSub = <li class="current-menu-item">|</li>
ACT = 1
ACT < .CUR
}
3 < .2
3.wrap = <ul>|</ul>
}
Mein Quellcode sagt nun:
<!-- Menu -->
<div id="menu">
<!-- ENDS menu-holder -->
<div id="menu-holder">
<!-- wrapper-menu -->
<div class="wrapper"><ul id="nav" class="sf-menu"><li><a href="index.php?id=1004" >Login</a></li><li><a href="index.php?id=1005" >Registrieren</a></li></ul></div>
<!-- wrapper-menu -->
</div>
<!-- ENDS menu-holder -->
</div>
<!-- ENDS Menu -->
Der Quellcode des Originals sagt:
<!-- Menu -->
<div id="menu">
<!-- ENDS menu-holder -->
<div id="menu-holder">
<!-- wrapper-menu -->
<div class="wrapper">
<!-- Navigation -->
<ul id="nav" class="sf-menu">
<li class="current-menu-item"><a href="index.html">Home<span class="subheader">Welcome</span></a></li>
<li><a href="features.html">Features<span class="subheader">Awesome options</span></a>
<ul>
<li><a href="features-columns.html"><span> Columns layout</span></a></li>
<li><a href="features-accordion.html"><span> Accordion</span></a></li>
<li><a href="features-toggle.html"><span> Toggle box</span></a></li>
<li><a href="features-tabs.html"><span> Tabs</span></a></li>
<li><a href="features-infobox.html"><span> Text box</span></a></li>
<li><a href="features-monobox.html"><span> Icons</span></a></li>
</ul>
</li>
<li><a href="blog.html">Blog<span class="subheader">Read our posts</span></a></li>
<li><a href="portfolio.html">Portfolio <span class="subheader">Showcase work</span></a></li>
<li><a href="gallery.html">Gallery<span class="subheader">Featured work</span></a>
<ul>
<li><a href="gallery.html"><span> Four columns</span></a></li>
<li><a href="gallery-3.html"><span> Three columns </span></a></li>
<li><a href="gallery-2.html"><span> Two columns </span></a></li>
<li><a href="video-gallery.html"><span> Video gallery </span></a></li>
</ul>
</li>
<li><a href="contact.html">Contact<span class="subheader">Get in touch</span></a></li>
</ul>
<!-- Navigation -->
</div>
<!-- wrapper-menu -->
</div>
<!-- ENDS menu-holder -->
</div>
<!-- ENDS Menu -->
Man sieht im Original-Quelltext noch span classes, die mit angegeben sind.
Bei meinem Menu, wenn ich dann mehrere Ebenen angebe, die dann ausgeklappt werden sollen, klappt dies nicht, sondern es werden alle (Seiten-) Links, die ich ausgeben will, auf der Seite verteilt angezeigt. Das Ausklappen funktioniert nicht.
Wer kann mir einen Tipp geben, wie ich das Original-Menü in Typo3 nun umsetzen kann?
Bin über jede Hilfe dankbar
Ich habe erst einmal das eigentliche HMENU abgebildet und gemerkt, dass ich schon bei der ersten Ebene des Menüs ins Stocken gerate.
Derzeitig sieht mein Quellcode in Etwa so aus:
<div class="wrapper">
<!-- Navigation -->
<ul id="nav" class="sf-menu">
<li class="current-menu-item"><a href="index.html">Home</a></li>
Allerdings sollte meine erste Ebene im Quell code so aussehen:
<div class="wrapper">
<!-- Navigation -->
<ul id="nav" class="sf-menu">
<li class="current-menu-item"><a href="index.html">Home<span class="subheader">Welcome</span></a></li>
Die span classes, die den Untertitel ausgeben sollen, bekomme ich nicht ins Menü. Ich weiß nicht wie ich es aufbauen soll, damit der Seitentitel und der Untertitel der Seite im Menü ausgegeben werden können.
Über Hilfe würde ich mich sehr freuen!
Ich habe jetzt im Internet mal herumgesucht und etwas zusammengebastelt, das evtl. noch angepasst werden muß:
lib.navigation = HMENU
lib.navigation {
special = list
special.value = 2, 227, 75, 74, 100,372
1 = TMENU
1 {
#expAll =1
wrap = <ul id="nav" class="sf-menu">|</ul>
noBlur = 1
NO = 1
NO {
ATagTitle.field = title
# add subtitle as span-tag
after {
wrap = <span class="subheader">|</span>
field = subtitle
}
}
ACT <.NO
ACT {
# doNotLinkIt = 1
wrapItemAndSub = <li class="current-menu-item">|</li>
}
}
# hier kommen die anderen ebenen
}
Dies erzeugt das Menü und der erste menüpunkt wird sogar mit Untertitel angezeigt. Auf dem ersten Blick sieht der Quelltext auch gut aus. Aber die nachfolgenden Punkte sind nicht formatiert.
Wenn man genauer hinschaut, befindet sich die "span" Klasse hinter dem a-Tag. Allerdings soll die "span" Klasse im a-tag beginnen und auch enden.
Was muss ich im Code daran ändern, damit es auch mit dem funktionierenden Quellcode funktioniert?
Du wrapst ja auch after 😉
lib.navigation.1.NO.stdWrap.dataWrap = |<span class="subheader">{field:subtitle}</span>
jank schrieb
Du wrapst ja auch after 😉
lib.navigation.1.NO.stdWrap.dataWrap = |<span class="subheader">{field:subtitle}</span>
Hallo. Danke für Deine Hilfe.
Aber ich weiss im Moment nicht, wo ich es im gesamten Code platziere?! Kannst Du bitte den gesamten Code mit deiner Änderung angeben?
Ich habe das alles mal mit Hilfe von Google umgeschrieben. Ich würde mich sehr darüber freuen, wenn mal jemand schaut, ob es ne andere, saubere Lösung bezüglich des Typoscript-Codes gibt:
lib.navigation = COA
lib.navigation {
10 = HTML
10.value = <ul id="nav" class="sf-menu">
20 = HMENU
20 {
special = list
special.value = 2, 227, 75, 74, 100,372
1 = TMENU
1 {
noBlur = 1
NO = 1
NO {
ATagTitle.field = abstract // description // subtitle
stdWrap.cObject = COA
stdWrap.cObject {
10 = TEXT
10.field = title
10.stdWrap.htmlSpecialChars = 1
20 = TEXT
20.field = subtitle
20.stdWrap.htmlSpecialChars = 1
20.wrap = <span class="subheader">|</span>
}
wrapItemAndSub = <li>|</li>
wrapItemAndSub.insertData = 1
}
ACT = 1
ACT < .NO
ACT.wrapItemAndSub = <li class="current-menu-item">|</li>
}
}
30 = HTML
30.value = </ul>
}
Vielleicht findet ja jemand noch eine Lösung, wie es anders geschrieben werden kann oder ob etwas überflüssig ist!
Was noch fehlt? Da es ein Dropdown sein soll, fehlt noch die Ausgabe der 2. Eebene. Hat dazu jemand einen Tipp?
Hallo wmcig,
habe mir dein ts angeschaut und etwas ausgedünnt.
lib.navigation = HMENU
lib.navigation {
special = list
special.value = 2, 227, 75, 74, 100,372
1 = TMENU
1 {
expAll = 1
noBlur = 1
wrap = <ul id="nav" class="sf-menu">|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // subtitle
stdWrap.dataWrap = |<span class="subheader">{field:subtitle}</span>
wrapItemAndSub = <li>|</li>
}
ACT < .NO
ACT.wrapItemAndSub = <li class="current-menu-item">|</li>
}
2 < .1
2.wrap = <ul>|</ul>
}
Zur Erklärung:
Wenn ein Objekt ein wrap unterstützt z.B. das HMENU dann am besten auch verwenden.
expAll = 1
brauchst du damit alle Menü-Einträge unabhängig von der geöffneten Seite ausgegeben werden. Siehe hierzu TMENU
Ansonsten fehlt dir ja noch die nächste Menüebene (2).
Als Tip: wenn du dich mal durch die TSREF gequält hast und die leider etwas komplizierte und manchmal auch umständliche Umsätzung verstanden hast, hilft dir diese beim schreiben deines TS Templates.
Danke Dir für die bihserige Hilfe. Das hat mich echt weitergebracht!
Ich habe für die zweite Ebene folgenden Code ins TS geschrieben:
# 2. Ebene
2 = TMENU
2.expAll = 1
2.noBlur = 1
2.wrap = <ul>|</ul>
2.NO.allWrap = <li>|</li>
2.ATagTitle.field = abstract // description // title
2.stdWrap.dataWrap = |<span>{field:title}</span>
Das ergibt zum Beispiel den folgenden HTML-Code:
<ul><li><a href="index.php?id=1004" >Login</a></li>...</ul>
Allerdings soll der "Login" (-Titel) von "<span></span>" umschlossen sein. Was fehlt denn da noch oder was ist falsch?
Da sich die Erste und 2. Ebene meist sehr ähneln würden ich die 1. Ebene in die 2. !per TypoScript! kopieren und danach die Änderungen zur 1. Ebene definieren:
# 1. Ebene in 2. kopieren
2 < .1
2 {
# wrap der Ebene ändern
wrap = <ul>|</ul>
# datawrap löschen
stdWrap.dataWrap >
# Inhalt mit span umschließen
stdWrap.wrap = <span>|</span>
}
jank schrieb
Da sich die Erste und 2. Ebene meist sehr ähneln würden ich die 1. Ebene in die 2. !per TypoScript! kopieren und danach die Änderungen zur 1. Ebene definieren:
# 1. Ebene in 2. kopieren
2 < .1
2 {
# wrap der Ebene ändern
wrap = <ul>|</ul>
# datawrap löschen
stdWrap.dataWrap >
# Inhalt mit span umschließen
stdWrap.wrap = <span>|</span>
}
Das hat gewirkt. Ich danke Dir sehr für die Hilfe!:p#giggle#
gerne! 8-)
Wenn du Lust hast kannst mir auch ein
Bier kaufen
😉