Hallo zusammen
Ich hab eine echte Knacknuss - zumindest für mich 🙂. Ich bräuchte für ein mehrspaltiges Dropdown Menü folgenden generierten Code:
<ul id="topnav">
<li><a href="#">Punkt 1</a></li>
<li>
<a href="#">Punkt 2</a>
<div class="sub">
<ul>
<li><h2><a href="#">Unterpunkt 1</a></h2></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href="#">Unterpunkt 1</a></h2></li>
<li><a href="#">Navigation Link</a></li>
<li><a href="#">Navigation Link</a></li>
</ul>
</div>
</li>
<li><a href="#">Punkt 3</a></li>
<li><a href="#">Punkt 4</a></li>
<li><a href="#">Punkt 5</a></li>
</ul>
Allerdings bin ich mit dem hierzu notwendigen typoscript ziemlich überfordert, ich bin mir nicht einmal ganz im klaren, wie ich die einzelnen Seiten von der Hierarchie anordnen müsste, damit eine solche Struktur möglich ist (da die ersten Seiten jeder Unternavigationsgruppe jeweils noch als <h2> ausgezeichnet sein sollten). Gibt es vielleicht einen typoscript-Kenner, welcher sich ein entsprechendes TMENU vorstellen könnte?
Grüsse
Christoph
Ich habe inzwischen eine Alternative zu meinem Code gefunden. Falls jemand auch einmal auf der Suche nach einem Mega Drop Down Menü (Drop Down mit mehreren Spalten) sein sollte, hier wird man fündig:
http://www.lwis.net/free-css-drop-down-menu/?all
Die dort gezeigten Menüs können alle mit der Extension "freecssdropdownmenu" nachgebildet werden.
Grüsse
Christoph
Hallo cwalter,
ich wollte auf diesem Weg mal fragen, wie Sie mit der Extension zurechtgekommen sind?
Zu Ihrem H2 Problem, falls Sie dieses noch nicht gelöst haben können Sie z.B. folgendes machen:
menu < plugin.freeCssDropDownMenu.horizontal
menu.1.NO.wrapItemAndSub = <li><h2> | </h2> </li> |*| <li> | </li> |*| <li class="last"> | </li>
menu.1.IFSUB.wrapItemAndSub = <li><h2> | </h2> </li> |*| <li> | </li> |*| <li class="dir last"> | </li>
Hallo jank
Vielen Dank für Ihre Antwort. Ich konnte das Menü mit der erwähnten Erweiterung aufbauen, und es funktioniert problemlos. Wenn ich wieder einmal ein ähnliches Problem habe, werde ich mir Ihren Lösungsvorschlag sicher einmal genauer anschauen.
Grüsse
Christoph
Hallo Jank,
bin durch Zufall schon mal auf der Seite
www.lwis.net/free-css-drop-down-menu/?all
gelandet.
Hatte mir gut schon gefallen. Vor allem das Bespiel Celebrity Horizontal beeindruckte mich. Hatte schon einmal versucht es in Typo3 einzubinden, jedoch mit wenig erfolg.
Die Seite von Ducati.com die in diesem Menu Thema schon erwähnt wurde kenne ich auch, deswegen war ich umso mehr erfreut als ich über die von Dir entwickelte Extension freecssdropdownmenustolperte. Nur habe ich ein paar Probleme das ganze umzusetzen.
Vielleicht binde ich das ganze auch Falsch ein, ich stehe wie der Ochs vorm Berg.
Ok. Mein Menu Vorhaben ist eigentlich gleich wie bei dem Beispiel Celebrity Horiz..
Mein Seitenbaum besteht erst einmal nur aus 2 Hauptseiten wobei die 2. Hauptseite jeweils 2 Unterseiten hat vom Typ spacer. Die spacer wiederum mit 4 Unterseiten. Ich weiß jetzt nicht ob ich mit dem Seiten Typ spacer auf dem Richtigen Weg bin? Vielleicht Lieg auch total daneben.
Startpage
Eine Seite
1. unterseite (spacer)
1. seite
2. seite
3. seite
4. seite
2. unterseite (spacer)
1. seite
2. seite
3. seite
4. seite
So komm ich zu keinen Resultat. Die Seiten unter dem Spacer werden nicht gelistet. :-(
Hier mal mein typo script.
lib.nav = COA
lib.nav {
10 = TEXT
10.value = <a id="navigation" name="navigation"></a>
10.stdWrap.prefixComment = 2|Output of lib.nav.10
20 = HMENU
20 {
stdWrap.prefixComment = 2|Output of lib.nav.20
wrap = <div id="nav_main">|</div>
1 = TMENU
1 {
wrap = <ul class="dropdown dropdown-horizontal"> | </ul>
expAll = 1
noBlur = 1
NO = 1
NO {
ATagTitle.field = abstract // description // subtitle // title
wrapItemAndSub = |*| <li> | </li> |*| <li class="last"> | </li>
stdWrap.htmlSpecialChars = 1
}
IFSUB < .NO
SPC = 1
SPC.doNotShowLink = 0
SPC.doNotLinkIt = 1
SPC {
allWrap = |*| <li class="sp1"> | </li> |*| <li class="sp2"> | </li>
}
}
2 < .1
2.wrap = <ul> | </ul>
3 < .2
4 < .2
5 < .2
}
}
Für jeglichen Tipp wäre ich Dankbar.
gruß
maty
Hallo skydivematy,
so kompliziert ist das ganze nicht...
zuerst fügst du das menü in den subpart oder marker ein in dem es nachher erscheinen soll. dann passt du die eigenschaften deinen bedürfnissen an
# in subpart kopieren
page.10.subparts.menu < plugin.freeCssDropDownMenu.horizontal
# css class hinzufügen
page.10.subparts.menu.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
# 2. Level nicht verlinken wenn es unterseiten gibt
page.10.subparts.menu.2.IFSUB.doNotLinkIt = 1
# 4. und 5. Menüebene löschen sonst zerreist es das menü...
page.10.subparts.menu.4 >
page.10.subparts.menu.5 >
#die andere css datei laden
page.includeCss.file1234 = typo3conf/ext/freecssdropdownmenu/res/css/dropdown/dropdown.linear.columnar.css
#... und das theme kopieren und aus z.B. fileadmin... laden
page.includeCss.file1235 = fileadmin/templates/css/default.advanced.css
# die helper muss man schauen ob man die selber braucht.... !!achtung!! überschreibt ein paar elementeigenschauften der ganzen seite...
page.includeCss.file1236 = fileadmin/templates/css/helper.css
so in etwa sollte das klappen...
Hallo Jank,
du hattest Recht. Habe das ganze etwas umständlich angegangen.
Da die Seite mit TV läuft habe ich es jetzt folgendermaßen eingebunden und es Funktionierte auf Anhieb.
Hier mit Visual Spacer
lib.nav = COA
lib.nav.10 < plugin.freeCssDropDownMenu.horizontal
lib.nav.10.2.IFSUB.doNotLinkIt = 1
lib.nav.10.2.SPC = 1
lib.nav.10.2.SPC.doNotShowLink = 0
lib.nav.10.2.SPC.doNotLinkIt = 1
lib.nav.10.2.SPC.allWrap = <li class="spacer1"> | </li> |*|<li class="spacer2"> | </li>
lib.nav.10.4 >
lib.nav.10.5 >
Jedoch das Resultat ist eigentlich das gleiche wie ich es vorher eingebunden hatte.
Wie schon erwähnt würde ich gerne das Beispiel lwis.celebrity verwenden.
Wie kann ich es erreichen das ich in der 2. ebene eine Gruppierung rein bekommen?
<h2>OBST</h2> | <h2>GEMÜSE</h2>
-------Äpfel--------------------Mören
-------Birnen-------------------Kohl
-------Trauben-----------------Wirsing
Wie oben schon gesagt, mit Spacer versucht und unterhalb (nicht innerhalb) der Spacer die jeweiligen Seiten, sagen wir mal die Obst und Gemüsesorten.
Das Resultat ist folgend.
<h2>OBST</h2> |
-------Äpfel-------Birnen
-------Trauben
<h2>GEMÜSE</h2>
--------Mören----------Kohl
--------Wirsing
Ich habe es jetzt mit verschiedenen Seiten Typen und Konstellationen im Seitenbaum versucht. Als Shortcut oder Standard für level 2 bekomme ich einen Rollover der 3. Ebene. An der Setup.txt habe ich erst einmal nicht geändert.
Das ganze hängt wohl noch etwas zu hoch für meine Typo3 Kenntnisse.
Bin langsam am verzweifeln. #angry#
Wäre Nett von Dir wenn Du mir dazu einen Tipp geben könntest oder wo mein Fehler hängt. Sorry für Die verwirrenden Erklärung.
Danke im Voraus & Gruß
maty
guten morgen,
In dem du den wrap wie in meinem Beispiel anpasst. Sonnst greift ja das CSS nicht...
Und aufbauen musst du 3 ebenen.
Ich schau's mir nachher nochmal genau an, bin grade nur am mobile.
Hallo Jank,
danke das Du dich so Bemühen tust.
Ich hatte jedoch Heute keine Zeit mich um Das Menu oder um meine Seite zu Kümmern. Ich werde mich morgen Abend (Montag) nochmal damit beschäftigen. Ab Dienstag habe ich erst einmal für 2 Tage kein Internet da ich den Anbieter wechseln werde und der neue erst 2 tage nach abschalten des alten Anbieters anschaltet.:-( Ist halt immer noch Afrika hier.
Noch mal ein großes DANKE
Gruß
maty
Moin! ich empfehle ohne spacer zu arbeiten weil du von denen meines wissens keinen inhalt vererben kannst...
als struktur empfehle ich normale seiten
Level1 ESSEN
---Level2 Obst
------Level3 Äpfel
------Birnen
---Level2 GEMÜSE
------Level3 Mören
Wichtig ist eben das du die css Klassen änderst
lib.nav.10.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
und die css Datei lädst
page.includeCss.file1234 = typo3conf/ext/freecssdropdownmenu/res/css/dropdown/dropdown.linear.columnar.css
Ich schau, dass ich das in die nächste Version des Menüs mit einbeziehe (vermutlich diese Woche)...
Das Menü bringt recht viele Möglichkeiten mit die ich noch nicht alle realisiert habe...
Hallo Jank,
sorry das ich mich so spät erst melde, hatte wenig Zeit.
Ok. Habe den Fehler gefunden warum es nicht funktionierte.
Es lag daran, dass ich nur die default.advanced.css aus dem folder lwis.celebrity per headerdata eingebunden hatte.
Du hattest mich ja schon einige male auf
page.includeCss.file1234 = typo3conf/ext/freecssdropdownmenu/res/css/dropdown/dropdown.linear.columnar.css
Hingewiesen, hatte jedoch Tomaten auf den Augen. :o
Mein Jetziges Setup sieht folgendermaßen aus:
page.headerData.10 = TEXT
page.headerData.10.value (
<link href="fileadmin/styles/gc_site/zero_col/css/zero_col.css" rel="stylesheet" type="text/css" />
<link href="fileadmin/styles/gc_site/zero_col/css/navigation/celebrity/default.advanced.css" rel="stylesheet" type="text/css" />
<link href="fileadmin/styles/gc_site/zero_col/css/navigation/celebrity/dropdown.linear.columnar.css" rel="stylesheet" type="text/css" />
)
Setup
lib.nav = COA
lib.nav.10 < plugin.freeCssDropDownMenu.horizontal
lib.nav.10.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
lib.nav.10.1.IFSUB.doNotLinkIt = 1
lib.nav.10.2.IFSUB.doNotLinkIt = 1
lib.nav.10.2.entryLevel = 1
lib.nav.10.2.expAll = 1
lib.nav.10.4 >
lib.nav.10.5 >
So funzt es genau wie ich es haben wollte.
Perfekt.
Werde dir den Link der Seite dann mal per PM senden wenn sie fertig ist.
Und natührlich ein GROSSES DANKE für die kleine aber feine Extension...
:p
gruß
maty
Hallo skydivematy,
schön dass es geklappt hat. ich werde dieses menü noch in die nächte version mit einbauen...
Danke für den Hinweiß auf die fehlende Funktion.
Ich schau mir die Seite gerne mal an.
Bis dann
Hallo, ich finde die CSS Menüs klasse, daher war ich angenehm überrascht, festzustellen das es eine Typo3 Portierung gibt. Nur leider bin ich zu doof sie einzubauen 🙁
Vielleicht liegt das ja an der Seitenstruktur habe die ich aufbauen musste...
TS-Template
--Home (Shortcut auf webhosting)
---Webhosting
---- Deutschland
----...
----...
--- Zweiter Menüpunkt
---- ...
---- ...
Mein TS sieht dann mal so aus (schamlos aus diesem thread geklaut ^^):
lib.mainMenu = COA
lib.mainMenu.10 < plugin.freeCssDropDownMenu.horizontal
lib.mainMenu.10.1.wrap = <ul class="dropdown dropdown-linear dropdown-columnar"> | </ul>
lib.mainMenu.10.2.IFSUB.doNotLinkIt = 1
lib.mainMenu.10.2.SPC = 1
lib.mainMenu.10.2.SPC.doNotShowLink = 0
lib.mainMenu.10.2.SPC.doNotLinkIt = 1
lib.mainMenu.10.4 >
lib.mainMenu.10.5 >
page.includeCss.file1234 = typo3conf/ext/freecssdropdownmenu/res/css/dropdown/dropdown.linear.columnar.css
angezeigt wird gar nichts 🙁
so ganz steige ich da grad nicht durch... gibt das eigentlich irgendwo ein howto? ein Manual ist ja leider nicht dabei... oder besser noch, was mache ich falsch?
grüße Jan
ich vergass zu erwähnen ich benutze Typo3 4.4.5 und grade habe ich gesehen das das plugin nnicht im Typoscript Object Browser zu sehen ist. 🙁
Hast du es denn in deinem Template im bereich include static ausgewählt?
jank schrieb
Hast du es denn in deinem Template im bereich include static ausgewählt?
ja ist ausgewählt, mittlerweile auch im Objektbrowser zu sehen, war wohl einfach ein Cachingproblem meines Firefox... aber zu sehen ist es immer noch nicht. auch nicht im Quellcode der Website.
Gibt das denn irgendwo eine Möglichkeit den Level anzugeben, ab welcher die Seiten gerendert werden sollen?
Wenn ich ein herkömmliches Menü wähle wird es auch korrekt im richtigen div-tag angezeigt, also ist der Objektpfad richtig.Im Templateanalyser wird das plugin in grün dargestellt, was wenn ich richtig liege, ja heisst das es ignoriert wird (siehe Screenshot).. #angry#
hier noch der screenshot von den static templates
Die Start ID kannst du in den constants angeben, genauso wie eventuelle excludes:
plugin.freeCssDropDownMenu.horizontal.start = xx
plugin.freeCssDropDownMenu.horizontal.exclude =
Start ist per default die ID 1, wenn es die bei dir nicht gibt wird auch kein Menü generiert.
Ich gebe zu ich muss die Doku mal fertigstellen :o
jank schrieb
Die Start ID kannst du in den constants angeben, genauso wie eventuelle excludes:
plugin.freeCssDropDownMenu.horizontal.start = xx
plugin.freeCssDropDownMenu.horizontal.exclude =
Start ist per default die ID 1, wenn es die bei dir nicht gibt wird auch kein Menü generiert.
Ich gebe zu ich muss die Doku mal fertigstellen :o
genau diese Info fehlte 😉
nun funktioniert es alles 😃
vielen Dank
Jan