[megamenu] Einbinden eines Artikels in die Navigation

Sorry, aber 2 Dinge verstehe ich noch nicht, ich komme da nicht weiter

wenn ich dem #mainnav li.submenu div.submenu
eine Hintergrundfarbe zuweise, dann passiert Folgendes:
Wenn man die Seite startet und geht dann über den entsprechenden Menupunkt (hier die "Flitterwochen-Ziele"), klappt das Menu aus, aber ohne das die Submenu-Items zu sehen sind.

Hat man dann die betreffende Seite ("Flitterwochen-Ziele") angeklickt reagiert das Menu fast richtig, die Submenupunkte sind zu sehen.

die "normale Navi, die im Megamenu abgebildet ist, hat auch noch ein weiteres Level (ist das ein Problem?) darf ich kein drittes Level haben?
Das Ganze soll so aussehen
wie man zur Zeit sehen kann, werden die Unterpunkte der Subnav auch erst beim Hovern angezeigt, die sollen aber offen liegen wie die Grafik zeigt.

puhh, sorry, aber ich schnall da was nicht und wäre dankbar um einen Denkanstoss
hoffe ich konnte mich einigermassen klar ausdrücken
Doro

Du hast die Start- Stoplevel deiner Navi im Megamenu falsch gesetzt
Aufgrund der Spaltengeschichte wirst du für jeden Bereich (z.B. Indischer Ozean) ein eigenes Navi - Modul mit Überschrift anlegen.
Jeweils Start- und Stoplevel 1 und entsprechender Überschrift.

Die Länder ändern sich ja nicht großartig. Ich würde das alles ggfls mit einem HTML-Modul machen.

Hallo lomex
besten Dank, hab ich jetzt soweit verstanden, offenbar ist wohl auch die Referenzseite dann wichtig gewesen. Die hatte ich garnicht angegeben.
auf jeden Fall tausend Dank.

und eine (hoffentlich letzte) Frage habe ich noch, ist es irgendwie möglich das Megamenu mit einer jQuery Galerie "carouFredSel" zu verheiraten.
mein Test unter Extras sieht so aus, als ginge das nicht.?
Doro

Wenn Du die Animation (Fade) meinst. Ja, dann hast du Recht. Die laufen nur mit Mootools.
Aber für diesen Fall habe ich ein Gist (Snippet).

Du kannst im Modul die Animation komplett ausstellen und folgende Versionen benutzen (jQuery bzw. Mootools)

https://gist.github.com/c4y/5272786
https://gist.github.com/c4y/5272795

GEIL!!!! :D
Tausend, tausend, tausend Dank

Hallo,

wie bzw. wo binde ich denn das "Gist (Snippet)" ein.

Muss ich das Script in einen Ordner kopieren oder den Code in eine Seite einbinden?.

Bei mir läuft das noch nicht richtig.

Über Hilfe bzw. eine kleine Anleitung wäre ich dankbar.

Das Gist geht nur in Verbindung mit der Erweiterung megamenu und ersetzt dort die Animation (Haken im Navi-Modul nicht setzen).
Es gehört in das Seitenlayout in den Javascript-Bereich.

Hallo,

habe ich alles gemacht, es geht aber kein Fade.

Ich habe Jquery und mootools aktiv und nutze das Jquery "moo_jquery_nc" Template. Liegt es evtl. daran?

Gruß

Teste mal mit nur einem JS-Framework. Was sagt die (Chrome-) Console? Fehlermeldungen?

Hallo,

ich habe jetzt das Mootools "Gist" eingebunden, damit geht der Fade. Mit dem JQuery "Gist" geht es nicht.

Wenn ich das "moo_jquery_nc" Template ausschalte dann geht auch das JQuery "Gist". Kann es sein das das JQuery "Gist" nicht mit dem Kompatibilitäts Template läuft?

Gruß

Wenn Du das so schreibst... wird es wohl so sein :-)
Habe das nicht getestet, weil ich NIE zwei Frameworks parallel laufen lasse.
Deswegen habe ich ja zwei Versionen.

Hallo,

dann ist es so OK. Ich dachte schon das ich hier noch einen anderen Fehler drinhabe.

Aber mit Mootools läuft es ja jetzt und das ist Super so.

Vielen dank für die Hilfe.

PS. Kann ich bei dem Gist auch evtl noch die Ein und Ausblendzeit beeinflussen?

Es geht alles. Du musst nur das JS anpassen :-)

hallo,
ich arbeite auf contao 3.1. und habe bei der installation von "megamenü" sofort einen fehler erhalten (http://www.fm-media.at/projekte/m-lienbacher/).
ich wollte die Daten via FTP sofort wieder löschen, um den Ursprungszustand wieder herzustellen, leider funkt dies überhaupt nicht.

hat jemand einen Tipp wie man diesen wieder herstellen kann bzw. eine Megamenü Alternative für Contao 3.

Sg Markus

Hallo lomex,
ich komm gerade auch mal in die Verlegenheit so ein Menü umsetzen zu 'dürfen'. Da ich aber mal ganz vortschrittlich sein wollte, hab ich vorher (da war noch nicht die Rede von MegaMenü) 3.1 installiert. Gibt es da schon irgendwelche Bestrebungen, das ihr das auch für die 3.1er fitt macht?

Viele Grüße

Hi,

ich habe viele Bestrebungen... Würde dir das Update Samstag / Sonntag reichen?

Olli

So. Online.
https://contao.org/de/extension-list...010009.de.html

Hallo,

die Neuerungen Deiner Erweiterung wie das CSS und das neue Template, sind wahrscheinlich nur für die 3.1 er Version oder?

Wenn ich 2.11 nutze habe ich nur die Möglichkeit die ältere Version zu nutzen, oder kommt da auch noch einmal eine Verbesserung?

Das kann ich auch für 2.11 zurückportieren. Kann aber zeitlich nichts versprechen.

OH cool, danke!
Muss ich mir nachher mal anschauen (oder morgen...). Ist irgendwie an mir vorbei gegangen hier ^^

Klasse sache. Bin mal gespannt wie gut das mit der Prallax Erweiterung zusammen arbeitet *g*

Viele Grüße

Hallo,

das wäre Super.

Ich danke Dir.

Könnte evtl. jemand ein kurzes Video machen ( z.B mit http://www.screenr.com/ ) , wie man das ganze konfiguriert ?
Ich bin hier irgendwie definitv zu dämlich und bekomme es einfach nicht zum laufen.

Das will ich gerne tun. Aber nicht vor'm Wochenende.

Zitat:

---

Zitat von lomex

Das will ich gerne tun. Aber nicht vor'm Wochenende.

---

Super danke :)
Gibt es evtl. sonst noch irgendwo eine Beschreibung ausser die von Github und die magere vom Wiki ?
Ich habe es bisher so:
http://im.bilderkiste.org/5137935432058/megamenu.png

Was muss ich nun genau bei welchen Artikeln eintragen ? Ich verstehe auch nicht ganz, wie das Mega Menü in das eigentiche Menü kommt :(

PS: Sowie ich es jetzt verstanden habe.

1. Mega Menü Modul anlegen & veröffentlichen auf der jeweiligen Menü Position
2. Seiten Struktur erstellen mit verstecken Menüpunkt Megamenü
3. Artikel anlegen innerhalb des MegaMenüs
( hier eben die module anlegen, die im MegaMenü angezeigt werden sollen )
4. In der Seitenstruktur unter Megamenü -> haken bei Megamenü und auf den Artikel MegaMenü referenzieren ( wo eben unser Inhalt drin ist, der im Megamenü darsgestellt werden soll Punkt 3 )

oder habe ich was falsch verstanden ?

Hallo kayyy,
vielleicht hilft Dir einstweilen mein Versuch es zu Beschreiben schon ein wenig weiter,

1.) Beim Anlegen des Moduls Mega-Menü sollte unter den Template-Einstellungen das Navigationstemplate "nav_mm" eingestellt sein.

2.) In den Themes wird dieses Modul natürlich auch eingebunden, wie Du dort normalerweise deine Navigation auch einbindest.

3.) In der Seitenstruktur werden dann die Seiten die Unterseiten haben, welche im Megamenu (angelegt als Artikel) erscheinen sollen, mit einem Häkchen bei Mega-Menü versehen und der Artikel den Du dafür vorher angelegt hast wird hier referenziert.

4.) Die Seite in welcher Du den oder die Artikel für das Megamenu angelegt hast, werden mit "Im Menü verstecken" versehen, bei Dir ist das glaube ich dann die Seite "Megamenu".

5.) Du kannst in den Artikel welcher dann im Megamenu angezeigt werden soll auch wieder ganz normale Navigationsmenüs als Modul einbinden, in diesen Navigationen gibst du dann die übergeordnete Seite als Referenz (Startpunkt) an.

Gruß Doro

Danke, dass hat mir schonmal etwas weiter geholfen. Zumindest wird es nun angezeigt :)
Meine nächste Frage wäre, wie bekomme ich denn nun die Spalten hin ?

Wenn ich z.B 3 individuelle Menü Module in den MegaMenü Artikel einbinde, erscheinen alle drei Menüs in einem <li>.
Ich hoffe man versteht, was ich meine :)

ich habe für die Spalten das Spaltenset genutzt:D

Zitat:

---

Zitat von Doro

ich habe für die Spalten das Spaltenset genutzt:D

---

Okay und in die Spalten dann z.B die individuellen Menüs ?
Denn wenn ich dort dann das Menü einbinde, greift auch hier das Megamenü ein.
Das Menü im Megamenü ist dann praktisch nicht sichtbar und zerreist alles.

Im prinzip zerreist es jedes <ul>, dass innerhalb des Megamenüs ist.
Hat du evtl. mal einen Link zu deiner Seite, wo du das Megamenü einsetzt ?
Evtl. kann ich mir da was abschauen, wie was gelöst ist :)

also ich habe einfach meine vorher angelegten Menumodule in die spalten des spaltensets eingesetzt, klappt wunderbar.

was meinst du mit "Denn wenn ich dort dann das Menü einbinde, greift auch hier das Megamenü ein." ???

In dem Artikel in dem Du die Spalten für deine Menüs setzt, setzt Du dir ein Spaltenset und setzt dahinein deine Menumodule.
Jedes Menu hat doch sein eigenes <ul class=""><class="submenu">...</li></ul> pro Menu. ich fürchte ich verstehe Dich nicht ganz

Hier mal ein Screen von Firebug

http://im.bilderkiste.org/7137940321329/menu.png

Das Menü innerhalb des Spaltensets hat ebenfalls die style Attribute, die für das Mega Menü zuständig sind.
Das Menü innerhalb des Spaltensets wird also nicht angezeigt, erst wieder bei einem hover.

aber das Mega-menu wird doch sowieso erst bei hover sichtbar???

ich schick dir mal meinen Screenshot, hier heisst mein spaltenset megamenuspalten
Anhang 11860

Zitat:

---

Zitat von lomex

Das will ich gerne tun. Aber nicht vor'm Wochenende.

---

Hattest du es evtl. mal geschafft ein kurzes Tutorial Video hochzuladen ?

http://www.youtube.com/watch?v=o58fzl1FnTM

Hallo,

ich habe ein Problem mit einer weiteren Navigation im Megamenu.

Folgender Stand:
Contao 3.1.4, aktuellste megamenu-Version 2.1.0 stable.
Ich habe testweise auf der Seite Home zwei Inhaltselemente im Megamenu eingebunden, ein Navigationsmenü mit Referenzseite Home (nur für Unterseiten von Home).
Und einen Artikel mit Bild.
Für die Aufteilung setze ich das Spaltenset subcolumns ein.

Wenn jetzt über Home gehovert wird blendet das Megamenu wie gewollt ein, hover ich dann aber die darin enthaltene Navigation verschwindet sie.
Sie erscheint auch nicht mehr, nur wenn die Seite neu lade ist sie wieder vorhanden.
Ich vermute das das Javascript vom Megamenu auch diese Navigation beeinflusst, finde aber den Fehler nicht.

Hier mal der Link: Entfernt

Gruß Michael

Versuche mal

Code:

---

.megamenu .mod_navigation ul {
 height: auto!important;
 opacity: 1!important;
}

---

Hallo lomex,

passt, wunderbar.

Danke!

Gruß Michael

Hallo,

also ich bekomme folgesdes nicht hin:

Beim überfahren des Hauptmenüs geht die Unternavigation ordnungsgemäß auf, nur sind dann dort keine Links sichtbar. Erst wenn ich mit der Maus über das Untermenü fahre werden die Links eingeblendet.

ohne deine CSS zu sehn, kann man wohl schwer helfen,:(
hast Du die Hinweise in der README von lomex beachtet?
zeig doch einfachmal was Du hast
Doro

Hallo,

ich habe jetzt selber gesehen das es unheimlich schwer ist das hinzubekommen. Ich habe so glaube ich auch den Fehler lokalisiert, komme aber mit meinem CSS nicht mehr klar. Da es in dem Untermenu mehrer ul li gibt und ich es nicht hinbekommen das diese nicht die css Anweisungen aus den oberen Ebenen mit übernehmen ist das bei mir ein heilloses Chaos.

Das was hier jetz gezeigt wird ist mein CSS für die 1te Ebene. Ich möchte jetzt eigentlich nur ein Untermenu mit Artikeln und Links die mit dem Spaltenset aufgeteilt werden anlegen.
Das Untermenü soll eine feste breite von 1000px haben und mit einem Border versehen werden. Das bekomme ich auch noch hin, nur wenn ich da drinne dann Links habe die mit ul li a formatiert werden habe ich das Problem das dort alle ul usw. die breite und alle anderen formatierungen übernehmen.

Mein CSS:

HTML-Code:

---


#mainmenu {
    width:100%;
    height:34px;
    top:76px;
    position:absolute;
    overflow:visible;
    background:-moz-linear-gradient(top,#787875 0%,#787875 50%,#6a6966 50%,#474744 100%);
    background:-webkit-linear-gradient(top,#787875 0%,#787875 50%,#6a6966 50%,#474744 100%);
    background:-o-linear-gradient(top,#787875 0%,#787875 50%,#6a6966 50%,#474744 100%);
    background:-ms-linear-gradient(top,#787875 0%,#787875 50%,#6a6966 50%,#474744 100%);
    background:linear-gradient(to bottom,#787875 0%,#787875 50%,#6a6966 50%,#474744 100%);
    -pie-background:linear-gradient(top,#787875 0%,#787875 50%,#6a6966 50%,#474744 100%);
    -webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.3);
    box-shadow:0 1px 2px 0 rgba(0,0,0,0.3);
    border-radius:4px;
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
    z-index:1000;
}

#mainmenu li {
    position:relative;
    float:left;
    padding:0;
    z-index:1000;
}

#mainmenu li a,
#mainmenu span {
    display:block;
    padding-right:46px;
    padding-left:46px;
    border-right:1px solid #696969;
    font-size:11px;
    line-height:34px;
    font-weight:bold;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:0.5px;
    text-shadow: 0 0 2px #3e3d39;
    box-shadow: 0 0 1px 0 #dcdcdc inset;
}

#mainmenu li.active,
#mainmenu li.trail,
#mainmenu li:hover {
    background:-moz-linear-gradient(top,#61615f 0%,#61615f 50%,#52514f 50%,#31312f 100%);
    background:-webkit-linear-gradient(top,#61615f 0%,#61615f 50%,#52514f 50%,#31312f 100%);
    background:-o-linear-gradient(top,#61615f 0%,#61615f 50%,#52514f 50%,#31312f 100%);
    background:-ms-linear-gradient(top,#61615f 0%,#61615f 50%,#52514f 50%,#31312f 100%);
    background:linear-gradient(to bottom,#61615f 0%,#61615f 50%,#52514f 50%,#31312f 100%);
    -pie-background:linear-gradient(top,#61615f 0%,#61615f 50%,#52514f 50%,#31312f 100%);
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
}

---

Das sind die CSS Befehle aus dem Megamenu die ich versuche anzupassen:

HTML-Code:

---


.mod_megamenu ul ul {
    display: none;
    left: 0;
    position: absolute;
    top: 36px;
    width: auto;
}
.mod_megamenu ul ul li {
    float: none;
    width: 120px;
}
.mod_megamenu ul ul li a, li.menuhover li a, li.menuhover li.menuhover li a {
    display: block;
    float: none;
    height: 22px;
    padding-top: 5px;
}
.mod_megamenu ul ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {
    color: #222;
}
.mod_megamenu ul ul li span, li.menuhover li span, li.menuhover li.menuhover li span {
    display: block;
    float: none;
    height: 22px;
    padding-top: 5px;
}
.mod_megamenu ul ul ul {
    left: 120px;
    top: 0;
}
.mod_megamenu ul li.submenu {
    font-weight: bold;
}
.mod_megamenu ul li.noborder {
    border-top: medium none;
}
li.menuhover a, li.menuhover li.menuhover a {
    color: #222;
}
li.menuhover span, li.menuhover li.menuhover span {
    color: #222;
}
.mod_megamenu ul.megamenu, .mod_megamenu ul.megamenu li, .mod_megamenu div {
    height: 150px;
    width: 200px;
}
.mod_megamenu ul ul span {
    width: 100%;
}

---

Durch die Vergabe einer CSS-Klasse in der Seitenstruktur kann jedes Megamenu individuell gestylet werden.

z.B.: #mainnav li.submenu div#submenuname {
background-color: #d99a3f;
margin-left:80px;

}