[megamenu] Einbinden eines Artikels in die Navigation

[lomex]

Möchte euch hier mein erste Modul vorstellen.

In der Seitenstruktur kann man das megamenu aktivieren und einen bezogenen Artikel auswählen. Dieser wird dann statt der sonst vorhandenen Submenü's in einem DIV ausgegeben.

Beispiel gibt es hier.

Mit oder ohne Megamenü lässt sich in der Seitenstruktur auch der Link einzelner Menüpunkte entfernen. Dies ist ja teilweise z.B. für level_1 gewünscht.

Gruß
lomex

[Kayzu]

Sehr nice.
Soviel ich weiss arbeitet ja Nina auch ein einer Megamenu Version.
Werds mal austesten.
Danke

[lomex]

Mittlerweile auch im Repository. Nur zur Kenntnis.

[x4all]

Hi zusammen, hab mir das Megamenü gerade mal installiert und soweit angelegt. Hat jemand ne CSS wo man importieren kann oder muss man alles wieder komplett neu schreiben? Hab schon versucht die CSS von der Demo zu nehmen, aber contao machts einem da irgendwie nicht einfach wie ich finde...

Und das hier:

Die Artikel für das Megamenü erstellt man z.B. unterhalb eines versteckten Menüpunktes innerhalb der Seitenstruktur. Die Artikel können jetzt z.B. mittels Grid-System individuell gestaltet werden.

habe ich noch nicht ganz verstanden... muss ich die Seitenstruktur jetzt neu anlegen? Bis jetzt hab ich einfach eine unformatierte Liste meiner Seitenstruktur, wie man es kennt wenn man es noch nicht per css formatiert hat..

Viele Grüße
X4all

[lomex]

Zunächst einmal ein Link zum Wiki.

Mit dem Megamenu ist auf jedenfall Handarbeit angesagt, soviel schonmal vorab. In der Seitenstruktur kannst du jetzt (für jeden Menüpunkt einzeln) das Megamenu aktivieren. Dadurch musst du einen Artikel angeben. Dieser Artikel stellt quasi dein DropDown Menü dar. Der Artikel muss sich natürlich irgendwo befinden. Daher habe ich in der Seitenstruktur einen Punkt "Megamenu" angelegt, wo ich meine Artikel hierfür speichere.

Sobald das Megamenu angeklickt bzw. ausgewählt ist, werden die sonst vorhanden Untermenüpunkte nicht mehr dargestellt. Diese müssten dann im Megamenu manuell in dem Artikel als Link eingebaut werden. Der einzige Vorteil hiervon ist, dass ich den Artikel halt frei gestalten kann, z.B. unter Einsatz eines Grid-Systems.

Die nötigen CSS-Formatierungen für das DropDown nimmt das Modul natürlich nicht ab!

Werde das Wiki nochmal erweitern. Arbeite aber gerade noch an diversen Animationen für das Megamenu, die man dann per Klick aktivieren kann.

[Tim G]

Hi,
super Erweiterung.

Kurze Frage:

Der einzige Vorteil hiervon ist, dass ich den Artikel halt frei gestalten kann, z.B. unter Einsatz eines Grid-Systems.

Ich könnte doch aber auch per {{insert_module::*}} wiederum ein klassisches Menu in den Artikel holen, oder?

Grüße Tim

[lomex]

Ja natürlich.
Auch ganz normal als Inhaltselement / Modul.

[matuweb]

Sehr geiles Teil !

Wenn ich deine CSS-Anweisungen aus dem Wiki nehme, sind alle Navipunkte übereinander verschachtelt, d.h. man kann die Punkte nicht erkennen.

Wie kann ich es anstellen, dass alle 4 Punkte nebeneinander liegen und bei hoover die Fläche mit den Artikeln direkt darunter auftauchen?

Danke

[lomex]

Die CSS aus dem Wiki ist nicht vollständig. Ist vielleicht unglücklich. Muss das dringend erweitern.

Wenn dein Modul die ID #mainnav hat, dann z.B. so:

float:left damit die Navi-Punkte nebeneinander liegen, position:relative, damit sich die div's an den li's ausrichten. Die Höhe ist nur ein Beispiel. Geht auch ohne, dann muss man halt gucken wie es passt. Die div's werden dann absolute positioniert, nach links rausgeschoben und an die Unterkante der oberen li gehängt. Bei li:hover wird der div dann wieder eingeblendet. Soweit meine flapsige Ausführung. Da fehlt natürlich noch jeglicher Style!

#mainnav ul li { float:left; position:relative; height: 24px;}
#mainnav ul div { position:absolute; left:-9999px; top: 24px; }
#mainnav ul li:hover div { left:0; }

Hast du eine Live-Site? Es lässt sich eigentlich alles per CSS formatieren. Guck Dir mal diverse CSS-DropDown-Tutorials an.

[x4all]

Also ein Video Tut wäre echt Top. Tu mich grad n bissel schwer. Ist das MegaMenü der Startpunkt einer Seite? Muss der nächste Punkt unter den einen Punkt, oder ist er ein Unterpunkt? Wenn man das Megamenü in der Seitenstruktur anlegt und ausblendet, werden die Unterpunkte ja auch nicht angezeigt.

VG
X4all

[lomex]

Arbeite gerade dran. Dauert aber bis Morgen.

[lomex]

Hier das Screencast im Schnelldurchlauf :-)

Habe übrigens in den letzten Tagen das ganze noch animiert. Und zwar mit bestehender HTML-Struktur und basierend auf dem vorhandenen CSS. Mit der Option fade und slidedown! Einstellbar ob für das Megamenu oder auch für die ganz normale Navigation.

Und das ganze mit 1,4kb (komprimiert) bzw. 3kb unkomprimiert.
Baue das jetzt mal ins Megamenu ein.

Gruß
lomex

[xmoto]

Danke von meiner Seite schon einmal für die Erweiterung und das Video. Die 5 min reichen aus .

[lomex]

Das Megamenu jetzt auch mit Animation, auch für "normale" Drop-Down-Menüs.

Habe es leider noch nicht ins Modul geschafft. Muss ich auf Morgen verschieben.

Gruß
lomex

[x4all]

Das Menü ist supercool - Ganz tolle Erweiterung. Tolle Arbeit :-).
Hätte noch ein Anliegen, oder besser eine Frage. Wenn ich mit der Maus über einen Hauptmenüpunkt gehe, fährt ja der Div aus, in dem ich mich dann bewegen kann. Wenn ich das mache, verschwindet der Hintergrund aus dem Hauptmenü den ich bislang mit hover anspreche (#megamenu ul li a:hover)

Gibt es eine Möglichkeit, den hover zu behalten wenn man sich innerhalb des DIV befindet?

Liebe Grüße
X4all

[lomex]

Versuche mal #megamenu ul li:hover div.
Ansonsten gucke Dir nochmal die Demo an.

Das funktioniert zwar nicht mit dem IE6, aber das ist ja ein Thema für sich.
Für den IE6 gibt es div. Javascript-Lösungen oder eine reine CSS-Lösung mit Conditional Comments. Diese geht aber nicht ohne weiteres mit Contao.

[matuweb]

Hallo,

kann es sein, dass die aktuelle Version (1.1.0 stable) nicht mehr mit dem Screencast zusammen passt?

Ich habe alles genau so eingegeben und bei mir ist die Hovernavi immer zu sehen.
Es fährt nichts nach unten aus...

Ist die css-Klasse .megemenu nun zu .mod_megamenu geworden?

Kann mir jemand helfen?

[lomex]

.megamenu wurde beik Update zu .submenu
Sorry dafür. Hat mit den Animationen zu tun, die ich eingebaut habe. Zu finden im Modul.

[matuweb]

Ahh!!!

Super, es funzt, Danke !

[Didl]

Hallo,
das Menu ist sehr ansprechend. Allerdings bekomme ich den Bug im IE7 z-index nicht in den Griff. Das megamenu überlappt nicht die Elemente im #container. Ich habe schon alles versucht, der header wird mit z-index 1000 überlappt, dort habe ich das mm integriert und dort befindet sich z.B. auch ein imageslider, dann ist aber Feierabend. Auch wenn ich in der basic.css position:relative rausnehme und einen kleinen z-index für left, main und right eingebe klappt es nicht. Hat jemand eine Idee?

[kleppi]

Hallo,

ich würde auch gerne das Megamenü einsetzen, leider komme ich mit der Beschreibung hier nicht klar, auch nicht mit der Beschreibeng im Wiki.

Kann vieleicht jemand, der das Menü eingesetzt hat, die Vorgehensweise Schritt für Schritt erläutern.

Gruß kleppi

[lomex]

@kleppi
Hast du Dir das Screencast vom 8.6. angeschaut?
Da ist das Schritt-für-Schritt drin!

@didl
Hast du mal einen Link?

[kleppi]

Danke lomex,

ich hatte schon mit meinem IE auf den "Screencast" geklickt, er hat mir nichts angezeigt.
Ich habe jetzt den Firefox genommen, der zeigt mir alles korrekt an.

Werde mich die Tage damit beschäftigen.

Gruß kleppi

[kleppi]

Hallo lomex,

nach dem Video habe ich nun mein megamenu hinbekommen.
Im Firefox, Opera klappt alles, nur der IE7 zeigt das Menü nicht an.

Gruß kleppi

[lomex]

Hast du dem div.submenu eine feste Breite zugewiesen?
Es könnte was mit hasLayout zutun haben.

Also hasLayout setzen, z.B. durch eine Breitenangabe oder zoom:1

Gibts ein Link?

[kleppi]

Hallo lomex,

hier ist der Link: http://www.joggen-in-nrw.de.


Das Stylesheet heißt "navigation-megamenu".


Gruß kleppi

[kleppi]

ich habe bei li.submenu:hover eine Breite definiert, dann funktioniert es.

Aber das Menü erscheint beim IE nicht korrekt als oberste Ebene, der untere Text ist noch sichtbar.

Gruß kleppi

[lomex]

Versuch mal folgendes:

#header .inside { z-index: 100; }
#container, 
.custom { z-index: 50; position:relative;
/* ggfls zoom:1; */
}

[kleppi]

Super lomex,

#header .inside {z-index:100;} hat gereicht.
Dein Menü geht nun in allen drei Browsern.

Gruß kleppi

[Supermann]

Hallo,

ich habe das Megamenü installiert und ich finde es toll.

Leider fehlen dort noch einige wie ich finde wichtige Funktionen, wie z.B es ist keint "trail" bzw. "active" im level_1 vorhanden wenn man auf eine Seite im level_2 klickt.

Das müsste dort noch umgehend mit rein.

Gruß

[kleppi]

Hallo lomex,

ich habe auf meiner Seite dein wunderbares megamenu eingebaut (siehe Bild).
Ich möchte zB. auf Antje mit der Mouse fahren, dann soll rechts ein weiterer Menüpunkt erscheinen.
Wie kann ich das machen.

Gruß kleppi

megamenu.bmp

[matuweb]

Wie muss ich das CSS bearbeiten (evtl. den Eintrag #mainnav ul li:hover div.submenu) das bei Mausberührung das Ausklapp-Menü immer an der gleichen Stelle erscheint und nicht mit den Navipunkten mitspringt?

Danke

Grüße
Matu

[lomex]

Neue Version. Und hier dazu eine Anleitung.

Gruß
lomex

[matuweb]

Super Danke !

Ich bekomme es aber immer noch nicht hin, daß das submenu immer an der selben Stelle aufklappt.

Auch wenn ich jedem Navipunkt in der Seitenstruktur eine andere Klasse gebe und diese dann style, springt das Menu weiter.

Kannst du mir hefen?

[lomex]

Ein Link wäre praktisch, damit ich mir das angucken kann.

[matuweb]

Ich habe es noch local liegen und tüftel gerade rum, bin schon etwas weiter !

Wenn nix mehr geht melde ich mich, Danke!

[Benjamin-Scherf]

Hallo,

ich verwende das megmenu n einer 2.10.2 - HTML5 Version. Im Frontend wird das Module seiner Eigenschaft als Navigations-Element nach so ausgegeben: <nav class="mod_megamenu ...

Leider bekomme ich im Template keinen zugrif auf die umschließende Auszeichnung.

Mein Frage lautet - Wie kann ich diese Auszeichnung zu einem <div class=" ... umschreiben?

Danke schon einmal im vorraus!

LG

[wolle1975]

Hallo lomex,

das Megamenü bringt mir beim Internet Explorer 7 und 8 eine Scriptfehlermeldung. Der 9er funktioniert einwandfrei.

Das Megamenü vom CSS her funktioniert in den IE's.

Folgende Fehlermeldung erscheint:

"Im Script ist ein Fehler aufgetreten".

Zeile: 39
Zeichen 5
Fehler: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Code: 0
URL. http://xxx.de/system/modules/megamenu/html/MooMenu.js

Contao-Version: 2.9.5

Hast du hierfür eine lLösung?

Viele Grüße

[matuweb]

Ich habe mal ne Frage zum CSS.

Ich habe vier Navipunkte die auch vier unterschiedliche Hintergründe beim hovern bekommen sollen.
Die Navipunkte sollen als Reitersystem auch einen Hintergrund bekommen.

Also soll der aktive Navipunkt so aussehen:

navi_service Kopie.png

Der Reiter oben wandert je nach Navipunkt, der Kasten unten soll bleiben.
Wenn ich jetzt das Hintergrund-PNG anlege mit Tranparenz, liegt es über den Navipunkten.
Ich kann die anderen Navipunkte nicht mehr anklicken, sie liegen unter dem Bild.
Was muss ich wie einstellen?

Danke

[Preetz]

Hallo!

Super Ext. aber ich komme nicht zum gewünschten Ergebnis.

Ich möchte gerne, dass nur bestimmte Menüpunkte angezeigt werden, wie man es bei individeuellen Menü machen kann.
Besteht hier irgendwie die Möglichkeit?

Preetz