Mootools Aufklappmenü MenuMatic in TYPOlight benutzen

[MacKP]

Da es immer viele Probleme mit Menüs gibt und sich viele Bewegende Menüs wünschen habe ich mal MenuMatic ( http://greengeckodesign.com/menumatic ) in Typolight eingebaut.

Tutorial ist jetzt unter http://de.contaowiki.org/Mootools_Au...3%BC_MenuMatic

Viel Spaß damit!

---
Wer mag darf mir auf was Spenden *g* -> http://www.amazon.de/gp/registry/reg...d=XN4TIB5T82DC
---
Vielen Dank an http://greengeckodesign.com :-)

[xchs]

Hallo MacKP,

tolles Tutorial! Wird sicherlich vielen weiterhelfen, die solcherart Menüs in Zusammenhang mit TYPOlight verwenden wollen.

[Oden]

THX für das Tut. Schön ist hier, daß es auch ohne JS funktioniert. cu.Oden

[MacKP]

THX für das Tut. Schön ist hier, daß es auch ohne JS funktioniert. cu.Oden

Hehe, wenns ohne JS nicht klappen würde, hätte ich das hier nicht reingesetzt *g*
Dann würde ich das selber nicht nuzten und hätte nciht mal getestet ob/wie das mit TL funzen könnte

Viele Grüße

[pmmueller]

Das ist ja echt "Best of all worlds". Mit JS für den Bedienkomfort, Fallback auf (gutes) CSS und einfacher Integration in TYPOlight, wo die MooTools ja sowieso schon dabei sind. Perfetto.

Ich bin einfach dein Tutorial durchgegangen und habe MenuMatic mal in das Webconsulting-Template eingebaut. Inklusive Anpassung der CSS-Positionierung war das in wenigen Minuten startklar. Abgesehen vom Feinstyling natürlich, aber mir ging es auch nur um das Prinzip.

Thank you very many.

[chr.flader]

Hi MacKP!

Erstmal dickes Lob, hast echt gut beschrieben und das soll was heißen, wenn selbst ich es hinbekomme.

Allerdings habe ich noch eine Frage:

Wie du an meiner Seitenstruktur erkennen kannst, wird erst die Ebene 2 angezeigt. Aber irgendwie funktioniert es nicht, wenn ich die Einstellungen entsprechend vornehme. Kann es sein, dass ich da irgendwo nen Gedankenfehler habe oder liegt es an dem Template?

Habe dir mal von beidem nen Screen gemacht und würde mich über eine Antwort freuen.

Vielen Dank

Christian

[MacKP]

Hallo chr.flader,
ich weiß noch nicht was du genau haben willst im Frontend... Was genau geht denn nicht? Eventuell ginge das über die Referenzseite besser...
Einfacher wäre es auch wenn du mal nen Link geben könntest.

Viele Grüße

[chr.flader]

Hi MacKP,

danke für die schnelle Antwort.

Erstmal den Link: www.webmedia-kiel.de/kmtv/

Allerdings ist hier nicht viel zu sehen ;-)

Ich wollte gerne das die Menüpunkt:

Startseite, Junioren, Juniorinnen, Damen, Herren

im Header angezeigt werden.
Irgendwie geht das aber nicht, wenn ich den Menüpunkt Saison 2010/2011 aus dem Menü ausblende.

Muss der Menüpunkt in der Navigation angezeigt werden, damit die Unterpunkt (Junioren, Juniorinnen, Damen, Herren ) angezeigt werden können?

Christian

[MacKP]

Hallo chr.flader,
was soll ich da sagen...
Du kannst nicht verschiedene Ebenen mit der Navigation auf einmal in einer Ebene darstellen... Hier noch mal zu den Mechanismen den Navigationsmoduls -> http://https://contao.org/projects/t...vigationsmenue

Ich weiß auch nicht wie du es geschafft hast bei deinen Einstellungen die Startseite zu haben...

An sich könnte das für dich klappen, wenn du ein extra Menü mit den Seiten aufbaust die du haben willst und nur weiterleitungen drinn hast...

Viele Grüße

[Nina]

Der einzige Haken bei Menumatic und den meisten Scripts dieser Art ist, dass sie leider alle darauf ausgerichtet sind, dass ein Link ein Link bleibt, auch wenn man bereits auf der Seite ist. Ich hatte mal versucht das Script entsprechend umzustricken, dass es mit dem Default-Navigationstemplate funktioniert, aber das habe ich dann nach einer Weile gelassen. Man müsste dafür so viel von dem JS modifizieren, dass man gleich sein eigenes Script schreiben müsste

[MacKP]

Der einzige Haken bei Menumatic und den meisten Scripts dieser Art ist, dass sie leider alle darauf ausgerichtet sind, dass ein Link ein Link bleibt, auch wenn man bereits auf der Seite ist. Ich hatte mal versucht das Script entsprechend umzustricken, dass es mit dem Default-Navigationstemplate funktioniert, aber das habe ich dann nach einer Weile gelassen. Man müsste dafür so viel von dem JS modifizieren, dass man gleich sein eigenes Script schreiben müsste

Ja, da hast du recht. Aber an sich ist das ein Nachteil den ich an der Stelle dann doch in Kauf nehme. Dafür können auch etwas ungeschicktere Leute mit der Aufklappfunktion umgehen, da diese nicht sofort wieder einklappt, wenn man mal kurz den focus verliehrt und so ^^
An der Stelle erhöht für mich JS mal die Usability (was ja meist eher eine Ausnahme ist *g*).

Viele Grüße

[LeoDesign]

Ist das machbar? Was ist zu tun?

Vielen Dank für die Hilfe,
Gruß Gunnar

[MacKP]

Ist das machbar? Was ist zu tun?

Vielen Dank für die Hilfe,
Gruß Gunnar

Uff.. in der Theorie geht das sicher mit ein paar Änderungen am CSS und JavaScript.

Ich hab allerdings noch keine Navi so genutz, da ich bisher vermieden habe unten eine Navigation zu haben (denn: keiner weiß wie hoch der Browser vom User is.. und bei 600 ist das doch sehr knapp um unten eine Navi zu haben ohne scrollen zu müssen).

Zusätzlich kommen andere Probleme/Fragen:
- Sollen die Menüpunkte dann umgedreht werden (das ist eben auch per CSS nicht so einfach, da die ja in der Reihenfolge eigentlich anders herum sind...) ?

Viele Grüße

[LeoDesign]

Danke für die Info,

aber da ist etwas falsch rüber gekommen. Die Navi soll nicht nach unten sondern schon nach oben. Ich habe da einen relativ dicken header von 250 px Höhe mit Imageslider. Das menü bleibt bei aktivem Submenü geöffnet und würde somit über den Main-Inhalt ragen, was mir natürlich nicht gefällt. Über das Bild darüber würde das aber bestens gehen, der Platz wäre auch mehr als ausreichend.

Nur wo anfangen wenn keine Ahnung! Ob die Punkte umgedreht erscheinen sollen oder nicht ist eigentlich schnuppe. Im Backend kann man zur Not die Punkte eben tauschen.

Wo muss ich denn da im Java angreifen?

[xchs]

Wo muss ich denn da im Java angreifen?

JavaScript meinst Du, nicht Java!
Naja, auf der Seite http://greengeckodesign.com/menumatic gibt es z.B. ein Object "direction"; damit könntest Du anstelle von "down" die Aufklapprichtung auf "up" stellen, vermute ich jetzt mal, ohne es selbst getestet zu haben

[lindesbs]

Hab ich gerade ausprobiert, ein einfaches ReplaceAll von "down" auf "up".
Und die Menues oeffnen sich von oben herunter

[LeoDesign]

Meine ich doch - schon klar: Java nicht gleich Javascript - war mir einfach zu lang!

Ich vermute mal, dass ich evtl. an der falschen Stelle gepostet habe, denn ich nutze nicht MenuMatic sondern die mootoolsnav

Dort habe ich bzgl. "direction" leider nix gefunden...

[MacKP]

Meine ich doch - schon klar: Java nicht gleich Javascript - war mir einfach zu lang!

Ich vermute mal, dass ich evtl. an der falschen Stelle gepostet habe, denn ich nutze nicht MenuMatic sondern die mootoolsnav

Dort habe ich bzgl. "direction" leider nix gefunden...

Ja, dafür ist das hier total falsch ><
Vllt kann ja ein Mod das mal in den passenden Bereich verschieben ;-)

Viele Grüße

[arnoldB]

Vielen Dank! TUT werde ich demnächst verwenden können .

[~svn~]

Erstmal danke für das Tutorial. Jetzt aber mal eine Frage: Wie schaff ich es, dass die Submenu-Punkte auch horizontal angeordnet werden? Zum Verständnis: Hab ein Mainmenu-Punkt "Portfolio". Als Submenu habe ich unter Portfolio "1", "2", ...
Und diese Zahlen will ich eben nicht vertikal sondern horizontal angeordnet haben. Wenn ich das ganze floate, verschwindet das komplette Submenu. Bin gerade ziemlich ratlos..

Danke schonmal.

[Toffa]

Danke für die super gute Anleitung.

Die Navigation sieht fast bei bei TYPOlight aus.

Hat von Euch jemand die Navigation mit den rerundetetn Ecken per CSS umgesetzt?

[MacKP]

Hallo ~svn~,
so wie du das gerne haben würdest habe ich es auch noch nicht eingesetzt... Da hab ich bisher lieber ne hybrid css Navigation benutzt, da es mit viel weniger JavaScript auskommt und die Unterpunkte ausgeklappt bleiben
Ich schätze mal das du auch das JS abändern musst um das so zu bekommen wie du gerne hättest.

@ Toffa,
bitte bitte,
aber was willst du jetzt wissen?
Was hat das mit der integration von der Navi hier zu tun?
Guck dir einfach das CSS ab

Viele Grüße

[gHeldT]

Wie schaff ich es, dass die Submenu-Punkte auch horizontal angeordnet werden?

Hallo ~svn~,

Die gleiche Aufgabenstellung hatte ich auch schon und habe das 'Problem' nach vielem erfolglosen selbst probieren vor einiger Zeit auch im MenuMatic-Forum gepostet - bisher ohne Antwort ... ich gehe mal davon aus, dass es deswegen derzeit mit MenuMatic nicht möglich ist ...!?

Ich habe es dann mit Superfish v1.4.8 realisieren können zu dem es auch ein wunderbares Tutorial in dieser noch wunderbarererereren... Community gibt.

Hoffe das hilft dir weiter.

Grüße

[Dani]

Danke für dein Tutorial! Könntest du mir sagen für was man die "vlist"-Klasse (in erster Zeile) braucht? Kann man diese entfernen?

[MacKP]

Danke für dein Tutorial! Könntest du mir sagen für was man die "vlist"-Klasse (in erster Zeile) braucht? Kann man diese entfernen?

Hallo Dani,
das kann weggelassen werden. Ist noch ein überbleibsel von einer anderen Navigation von mir ><

Viele Grüße

[wdburgdorf]

Das ist mal ein schönes Dropdown, Danke für das Tutorial.

Bevor ich ans Werk gehe, noch eine Frage: Mit Opera sieht das Menü auf der Autorenseite ziemlich kaputt aus (http://greengeckodesign.com/menumatic)

Weiss jemand, ob das ein grundsätzliches Problem mit Opera ist (wäre ja nichts Neues ...) oder kann man das leicht beheben?

[pmmueller]

Weiss jemand, ob das ein grundsätzliches Problem mit Opera ist (wäre ja nichts Neues ...) oder kann man das leicht beheben?

Ich glaube eher, dass das mit den Font-Sachen zu tun, die da geladen werden, weil es bei den Überschriften weiter unten auf der Seite auch passiert.

[wdburgdorf]

Danke. Inzwischen habe ich angefangen. Bei mir sieht es mit Opera etwas besser aus, aber noch nicht gut.

Wo ich jetzt noch hänge, ist, die Untermenüs zu formatieren. Da das mit Javascript erzeugt wird, komme ich mit Firebug nicht hin. Vor allem habe ich noch nicht herausgefunden, wie man die Position der Dropdowns ändert. Bei mir erscheinen sie etwa einen halben Meter unterhalb der Hauptmenüleiste. So etwa.

Hat jemand einen Tipp? Danke!

EDIT: Bin schon näher dran: Mit Dragonfly kommt man hin. Und die Position ist ein Elementstil und wird irgendwo berechnet. Wo???
Ich hab's: Im js stehen ganz oben ein paar Parameter.

[MacKP]

Hallo wdburgdorf,
ohne Link kann ich dir eh nur sagen: Dann wirst nen Fehler in den CSS Vererbungen haben.

Und das hilft dir glaube ich mal so gar nicht.

Also spätestens bei der nächsten CSS Frage bitte direkt mit Link zu dem Betreffenden Objekt Posten.

Viele Grüße

[wdburgdorf]

Hallo MacKP,

Danke für die Antwort und das schöne Tutorial. Eigentlich halte ich nicht viel von Dropdowns, aber dieses hier gefällt mir.

An Vererbungen lag es weniger. Man konnte es aber ausser im js auch mit CSS lösen. Da habe ich noch viel dran machen müssen und praktisch gestern den ganzen Tag damit verbracht.
Insbesondere an IE hatte ich wieder grosse Freude ... und dass es mit und ohne js gut aussieht, und ich es ohne Aufwand wieder wegmachen kann, wenn's der Kunde nicht will usw.

Link hätte ich sowieso angeben können. Ein bisschen zögere ich da immer, Links von unfertigen Seiten wegzugeben. Ich weiss ja nicht, was der Kunde davon hält.
Aus aktuellem Anlass aber doch: http://web167.login-11.loginserver.ch/index.php

Damit bin ich schon sehr zufrieden. Nur mit IE sieht es noch nicht toll aus, die Schrift ist nicht schön und natürlich sind die Ecken nicht rund.
Mit Opera ist es gar nicht gut. Nicht nur, dass es schlecht aussieht, es bleibt auch immer etwas hängen, wenn der Kasten verschwindet. Da habe ich anderswo das gleiche Problem, ohne js.

Wenn Dir oder sonst jemandem dazu etwas einfällt, würde ich mich freuen.

Gruss, Ralf.

[MacKP]

Ich hab jetzt mal mit nem Opera geschaut. Und ich habe unter Linux mit Opera 9.6 keine Probleme mit dem Original..

Allerdings habe ich schon mit FF Probleme bei deinem.. Die höhe ist da nicht gut Berechnet (so wird unten beim Submenü was abgeschnitten).

Schau am besten erst mal das du das Original zum laufen bekommst. Dann sollte es leichter sein auch eigene Änderungen hinzubekommen.

Viele Grüße

[wdburgdorf]

Mit Firefox verbringe ich jeden Tag Stunden, da sehe ich zuerst, wenn was nicht läuft. Das Original lief sofort, nur für mein Design musste ich einiges anpassen. Aber auf Firefox (Win) gab es nie Probleme. Nur zeitweise leichte Verschiebungen.
Unter Linux habe ich es allerdings nicht angesehen.

Und Opera auch nur 10.53. Mir da noch alte Versionen anzusehen geht mir etwas zu weit.

Dass unten was abgeschnitten wurde habe ich nur im IE gehabt und dort repariert. Nur die oben beschriebenen Feinheiten sind noch nicht ideal. Wenn's auch noch mit Linux-Versionen liefe wäre auch schön, ist aber nicht meine erste Sorge ... Danke jedenfalls für die Meldung.

Gruss, Ralf.

[Hauge]

Hallo zusammen,

kriegt man das Menü auch mit Contao RC1 hin?
(unter der Beta funktionierts noch...)

Gruß
Hauge

[MacKP]

Hallo zusammen,

kriegt man das Menü auch mit Contao RC1 hin?
(unter der Beta funktionierts noch...)

Gruß
Hauge

Mal ne Gegenfrage:
Warum sollte es da nicht gehen?
Menü ist an sich ja noch gleichgeblieben vom Aufbau, man kann immer noch externe Scripte einbinden...
Ich seh nix was dagegen sprechen sollte.

Viele Grüße

[Hauge]

Hallo MacKP,

das hatte ich mich auch gefragt. Ich hab zwischenzeitlich ein bisschen rumgespielt und sämtliche mootool-scripte mal ausgeschaltet und einzeln wieder hinzugeschaltet >>> Jetzt klappts

Eine Erklärung hab ich nicht - aber jetzt haut es hin

Also viiiiiieeeelen Dank für Deine Mühen!

[Cranker]

Hallo,

hat schon mal jemand versucht die 2. Menüebene anders zu gestalten als die 3. Menüebene?
Leider kann man scheinbar nur mit

#subMenusContainer ul

alle Untermenüs anpassen.
Leider habe ich noch keine Möglichkeit gefunden über

#mainnav ul.level_2

oder

#mainnav ul.level_3

die einzelnen Level anzusprechen.

Jemand eine Idee?

[kai]

Hallo,

Vielen Dank für das tolle Tutorial. Habe es nach der Anleitung eingebunden und bis jetzt funktioniert alles super.

Ein kleines Problem habe ich aber, ich trau mich ja gar nicht zu Fragen, aber wie zentriere ich das Menü auf meiner Seite???

Hier mal der Link zu meiner Testseite: http://dagba-gbr.de

Ich weiss nicht wie ich es anstellen soll, habe schon etliches probiert....

Vielen Dank für die Hilfe!!!

Gruß


Kai

[MacKP]

Hallo kai,
versuchs mal so:

.mod_navigation {padding-left: 20px;}

Der Abstand ist jetzt nur grob geschätzt... musst nen bissel anpassen.

Viele Grüße

----

@ Cranker:
Versuchs mal so: #subMenusContainer ul ul li und #subMenusContainer ul ul ul li

Da musst dann nur immer schauen das du die Werte passend überschreibst, da sich das vererbt.
Getestet hab ichs noch nicht XD

Viele Grüße

[kai]

Hallo MacKP,

vielen dank für deinen Tipp, genau so geht es....

Ich habe es die ganze Zeit mit

margin: 0 auto;

probiert, aber das geht nicht....


Gruß

Kai

[Cranker]

@MacKP

Danke für den Tipp.
Aber das hatte ich auch schon probiert - geht nicht :-(

Das Problem liegt glaube ich darin, dass die Level per Javascript "überschrieben" werden.
Die ID

#subMenusContainer

gibt es ja im Quellcode gar nicht.
Daher kann man darüber auch nicht die verschiedenen Level ansprechen.

Die Level dagegen gibt es im Quellcode, die lassen sich aber scheinbar nicht mehr stylen...