mootools Megamenü

[nelhop]

Hallo Zusammen,

ich würde gerne so ein mootools Megamenü verwenden.
Kurze Anleitung dazu gibt es hier.

Ich habe die in der Anleitung angegebene Javascript Datei eingebunden. Die standard mootools.js wird von contao ja sowieso eingebunden.

Dann habe ich im nav_default.tpl den li die class="mega" zugeteilt.

Nun weiß ich leider nicht weiter...
Mit Javascript stehe ich noch ganz am Anfang und wäre für etwas Hilfe sehr dankbar.

Schöne Grüße,
nelhop

[psren]

Werden die Klassen richtig erzeugt?

Ich vermute, dass du kein Problem bei Javascript hast, sondern das das funktioniert, und du nur dein CSS noch anpassen solltest.

.hovering ul {
  display: block;
}

oder so etwas in die art.
Um das genau sagen zu können brächte ich aber einen Link oder so etwas zu deiner Seite.
Schau aber mal, ob die Klasse hovering generiert wird.

[nelhop]

Nein die Klasse hovering (wie im Beispiel) wird nicht erzeugt.

Hier ist der Link zur Seite: http://profrie-dive.de
Da die Seite noch nicht online ist habe ich noch einen Passwortschutz eingerichtet.
Benutzer: contao
Passwort: community

Danke für die Hilfe,
nelhop

[nelhop]

Inzwischen habe ich meinen "Fehler" gefunden. Ich hatte immer nur im FF getestet. Dort wird scheinbar die klasse hovering aber nicht erzeugt (ist ja auch eigentlich nicht nötig da es auch mit de Pseudoklasse :hover geht). In Safari klappt es aber.

Mit ein bisschen CSS zauberei sieht dann auch alles so aus wie es soll... FAST

Ich habe das nav_default.tpl etwas angepasst:

<ul class="<?php echo $this->level; ?>" id="menu">
    <?php foreach ($this->items as $item): ?>

        <?php if ($item['isActive']): ?>
                <li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>">
                    <span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>">
                            <?php echo $item['link']; ?>
                    </span>
                        <div class="mega-menu <?php echo $this->level; ?>">
                            <?php echo $item['subitems']; ?>
                        </div>
                </li>
            <?php else: ?>
                <li<?php if ($item['class']): ?> class="<?php if ($item['subitems']): ?>mega<?  endif;?> <?php echo $item['class']; ?>"<?php endif; ?>>
                    <a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?>
                    </a>
                    <?php if ($item['subitems']): ?>
                        <div class="mega-menu <?php echo $this->level; ?>">
                            <?php echo $item['subitems']; ?>
                        </div>
                    <?  endif;?>
                </li>
        <?php endif; ?>
    <?php endforeach; ?>
</ul>

Damit werden die Unterlinks (subitems) in ein div.mega-menu gelegt.
Bei nur einer Unterebene klappt das auch wunderbar.

Aber bei mehreren Unterebenen werden die div.mega-menu verschachtelt.
Wie kann ich das verhindern, und stattdessen alle Unterlinks (egal welcher Ebene) ausgeben. Zum beispiel in einer <ul> oder je in DIVs...?

Bin für jede Hilfe Dankbar.
mfg

[x4all]

Das ist bis jetzt der Hammer! Genau sowas hab ich gesucht. Diese Menues sind meiner Meinung die beste Navigation die es gibt. Ich bin brennend an der Weiterentwicklung interessiert.

Ich bin zwar kein Entwickler, aber ich wuerde mich anbieten ein Tutorial hierzu zu schreiben. Dazu muesste ich aber selbst erstmal wissen was genau Schritt fuer Schritt gemacht werden muss.

VG
X4all

[nelhop]

Also mit dem obigen Code klappt es. Ich hatte nur im CSS noch einige Fehler.
Allerdings ist das Verschachteln der DIVs keine sehr elegante Lösung... Hat hier noch jemand eine Idee? Kann ich die Unterlinks irgendwie anders ausgeben?

Aktuell muss ich noch was CSS anpassen. Sobald ich das gelöst habe, kann ich gerne nochmals alle Schritte zusammen fassen.

Wenn ich die Zeit dafür finde wäre ja auch die Entwicklung einer Erweiterung ganz interessant...

[dirksche]

Hallöchen,

ich arbeite auch gerade an einem Mega Menü... habe das ganze mit jquery umgesetzt.
Die Menüpunkte müssen aber von Hand eingepflegt werden... worüber ich nicht sonderlich glücklich bin. Wäre auch sehr an einer Mootools Lösung interessiert.

Die Früchte meiner Arbeit könnt euch z.Zt. unter http://unilux.zpn-workzone.de (Menüpunkt "Fenster") ansehen.

LG,
Dirk

[nelhop]

Hey Dirk,

Die Menüpunkte müssen aber von Hand eingepflegt werden... worüber ich nicht sonderlich glücklich bin. Wäre auch sehr an einer Mootools Lösung interessiert.

Wie hast du das ganze denn angelegt? Vielleicht können wir aus dem ganze ja eine Superlösung basteln
Das nav_Template müsste man ja eig auch für deine Zwecke anpassen können.

Es wäre also ganz hilfreich, wenn du dein Vorgehen bisher mal schildern könntest. (Das Menü sieht ja schon schick aus).

mfg,
nelhop

[dirksche]

Ich habe ein "Eigener HTML-Code" Modul angelegt, welches folgenden Code enthält:

<div class="MegaMenu">
<a class="MegaMenuLink" href="{{link_url::3}}"><span>FENSTER</span></a>
<div class="MegaMenuContent">
<table class="MegaMenuTable" border="0">
<tr>
<th><div class="MegaMenuHead">Holz-Alu-Fenster</div></th>
<th><div class="MegaMenuHead">Holz-Fenster</div></th>
<th><div class="MegaMenuHead">Kunststoff-Fenster</div></th>
<th><div class="MegaMenuHead">Kunstoff-Alu-Fenster</div></th>
</tr>
<tr>
<td>
<ul class="MegaMenuLists">
<li><a href="{{link_url::21}}">Vorteile Holz-Alu</a></li>
<li><a href="{{link_url::22}}">Farben/Material</a></li>
<li><a href="{{link_url::23}}">Fensterformen/Sprossen</a></li>
<ul class="SubMegaMenuLists">
<li><a href="{{link_url::29}}">LivingLine</a></li>
<li><a href="{{link_url::30}}">ModernLine</a></li>
<li><a href="{{link_url::31}}">DesignLine</a></li>
</ul>
<li><a href="{{link_url::24}}">Technik/Konstruktion</a></li>
<li><a href="{{link_url::25}}">Fenster-/Balkontürtypen</a></li>
<ul class="SubMegaMenuLists">
<li><a href="{{link_url::27}}">Balkontür JumboLine</a></li>
</ul>
<li><a href="{{link_url::32}}">Passivhausfenster</a></li>
<li><a href="{{link_url::26}}">Zubehör</a></li>
</ul>
</td>
<td>
<ul class="MegaMenuLists">
<li><a href="#">Vorteile Holz</a></li>
<li><a href="#">Technik/Konstruktion</a></li>
<li><a href="#">Farben/Material</a></li>
</ul>
</td>
<td>
<ul class="MegaMenuLists">
<li><a href="#">Vorteile Kunststoff</a></li>
<li><a href="#">Technik/Konstruktion</a></li>
<li><a href="#">Farben/Material</a></li>
</ul>
</td>
<td class="LastCell">
<ul class="MegaMenuLists">
<li><a href="#">Vorteile Kunststoff</a></li>
<li><a href="#">Technik/Konstruktion</a></li>
<li><a href="#">Farben/Material</a></li>
</ul>
</td>
</tr>
</table>
</div>
<a class="MegaMenuLink" href="#"><span>TÜREN</span></a>
<div class="MegaMenuContent">
</div>
<a class="MegaMenuLink" href="#"><span>UNTERNEHMEN</span></a>
<div class="MegaMenuContent">
</div>
<a class="MegaMenuLink" href="#"><span>SERVICE</span></a>
<div class="MegaMenuContent">
</div>
</div>

Diese Lösung ist natürlich nicht sonderlich elegent, da man das Menü von Hand pflegen muss. Orientiert habe ich mich bei dem Menü an folgendem Tutorial:
http://www.geektantra.com/2009/09/jquery-mega-menu/

[nelhop]

Daran einfach ein HTML "Eigener HTML-Code" Modul zu nutzen hatte ich auch gedacht. Den Gedanken hatte ich allerdings schnell wieder verworfen.
Jetzt überlege ich aber, ob es mit einem nav_template überhaupt geht. Mit einem eigenen HTML-Code wäre man natürlich flexibler in der Gestaltung (Den Login in der Beispielseite finde ich sehr cool!)

Die händische Pflege ist hier natürlich sehr umständlich. Wenn die Seite später an den Kunden übergeben wird, kann dieser ohne HTML Kenntnisse keine Menüpunkte anpassen...

Gibt es einen nennenswerten unterschied zwischen den beiden Menüs?
Ich denke wir sollten uns jetzt eins aussuchen, mit dem wir dann tüfteln können

[dirksche]

Mir gefällt dieser Aufklapp Effekt bei meinem Menü ganz gut. War unter anderem auch der Grund warum ich mich für dieses Script entschieden hatte.

[nelhop]

Ja den finde ich auch ganz schick.
Ich hatte mich für die Mootools-Varainte entscheiden, da das ja schon in Contao integriert ist. Aber da ich ja trotzdem noch weitere Skripts einbinden musste, hat dies auch keinen wirklichen Vorteil.

[x4all]

Also ich wuerde der Einheitlichkeit halber die Mootools Variante bevorzugen. So muss man nicht zwei verschiedene JavaScript FramesWorks in ein CMS einbinden. Somit bleibt es einheitlich, uebersichtlich und sauber. Ausserdem ist - wie schon gesagt - die Mootools core in Contao eingebunden.

Gruesse
X4all

[x4all]

Ich schaetze die beste Loesung waere das hier:

Design von dem hier:
http://www.aplusdesign.com.au/demos/...nu/index.html#

mit der Animation beim Ausklappen von: http://unilux.zpn-workzone.de/

So hat man die Uebersichtlichkeit, Titel, Untertitel, Icon, Animation und das Menu springt nicht gleich zu, wenn man mit der Maus kurz draussen ist.

Wenn Ihr sowas hinbekommt, Respekt Respekt! Ich kann euch zwar bei der Entwicklung nicht helfen, mache aber gerne das Tut.

PS: @ Nelhop. Soll dein Menu so aussehen wie auf deiner Webseite nach dem Einloggen, oder so wie das von aplusdesign? Das von aplusdesign ist halt super, weil man alles drin hat. Sowas braeuchte ich.

Gruesse aus Vegas
X4all

[Messa]

Wenn du hier schaust ist es Schritt für Schriit erklärt

http://blogs.sitepoint.com/make-a-me...u-with-jquery/

Wenn du das nav_default.tpl bisschen umbastelst und den
Javascript einbindest sollt es klappen.

lg Matthias

[nelhop]

Ich schaetze die beste Loesung waere das hier:

Design von dem hier:
http://www.aplusdesign.com.au/demos/...nu/index.html#

mit der Animation beim Ausklappen von: http://unilux.zpn-workzone.de/

Ja so etwas würde ich mir auch wünschen! Allerdings sind das ja zwei verschiedene Ansätze. Einmal Mootools und einmal jQuery... Ich bin leider kein Programmieren, aber ich befürchte, dass man das nicht ohne weiteres kombinieren kann.
Hier lasse ich mich aber gerne eines Besseren belehren

PS: @ Nelhop. Soll dein Menu so aussehen wie auf deiner Webseite nach dem Einloggen, oder so wie das von aplusdesign? Das von aplusdesign ist halt super, weil man alles drin hat. Sowas braeuchte ich.

Mein Menü soll so aussehen wie das Beispiel von aplusdesign. Dafür muss ich (so glaube ich) nur noch das CSS anpassen.

mfg
nelhop

[nelhop]

Wenn du hier schaust ist es Schritt für Schriit erklärt

http://blogs.sitepoint.com/make-a-me...u-with-jquery/

Wenn du das nav_default.tpl bisschen umbastelst und den
Javascript einbindest sollt es klappen.

Ja hier haben wir wieder die jQuery Variante. Ich denke wir sollten versuchen bei Mootools zu bleiben... Aber vielen Dank für den Hinweis

[x4all]

Die Frage ist, wer kann das ganze mit Mootools realisieren. Wir brauchen jemand der JavaScript und Mootools programmieren kann. Ich haette zwar jemand, allerdings hockt der in Australien.

Wer kann uns hier bitte helfen?

VG
X4all

[Nina]

Ich versuche momentan das Megamenu in Contao einzubauen und bin damit auch schon sehr weit gekommen. Mittlerweile läuft es prinzipiell und ich schraube nur noch an den Feinheiten herum. Allerdings bin ich jetzt 1 1/2 Wochen im Urlaub. Wenn ihr euch geduldet, werde ich versuchen danach meinen derzeitigen Stand online zu stellen und eine Anleitung dafür zu schreiben.

[x4all]

Wie???
Du hast es schon als Komponente, mit Animation und Mootools nahezu fertig???
Gib mir deine Adresse, ich schick dir nen Blumenstrauss und 2 Kg Schokolade!

Gruesse

[Nina]

Du hast es schon als Komponente, mit Animation und Mootools nahezu fertig???

ja, das hab ich

[nelhop]

Hey Nina,
das klingt ja vielversprechend!
Es wäre echt klasse, wenn du erklären könntest wie du es zum Laufen bekommen hast
Bin mal gespannt ob ich total auf dem Holzweg war...

Dann wünsche ich dir mal einen schönen Urlaub!

[teo]

Wow, das interessiert. Hatte vor einigen Wochen hier schoneinmal die Frage gestellt ob soetwas geht und wenn ja wie

[x4all]

Also, ich kann noch gerne ein paar Tage warten. Aber das klingt wirklich vielversprechend.

VG
X4all

[dirksche]

Find ich auch. Wenn ich überlege, wie lange ich mir schon an der Geschichte die Zähne ausgebissen habe :-)

[bajdin]

klingt sehr interessant!
Gibt es schon was neues?

Ich freu mich ...

[Kayzu]

Wäre da auch sehr interessiert daran an dem Menü, da es doch immer mehr in Mode kommt und Du eigentlich auf geringem Platz sehr viel erreichen kannst und es auch nicht unübersichtlich wird.

Hatte auch schon versucht soetwas umzusetzen, aber da fehlt mir irgendwo die Routine bei sowas.

[dirksche]

Ja, dieses Menü gehört wirklich zur Königsklasse. Bin mal gespannt auf Nina's Tutorial.

[Nina]

Ich habe euch nicht vergessen
Da ich meinen Osterurlaub mit Fieber im Bett verbracht habe, war es nicht viel mit "Tüfteln am Script", aber ich setze mich jetzt in den kommenden Tagen wieder dran und schau, dass ich es hoffentlich bald fertig bekomme.

[dirksche]

Das war ja dann weniger schön... vor allem bei dem tollen Wetter über Ostern.

[Sares]

Danke Nina für Deinen tollen Einsatz!

Ist Dein Menü vielleicht auch irgendwo live zu sehen, damit wir wissen,
worauf wir uns alle demnächst freuen können?

Beste Grüße
Sares

[dennis]

und nun eine weitere anfängerfrage:

wo platziere ich dieses menü am besten? lege ich das in den headbereich oder in die hauptspalte?

ich meine, das klappt nach unten aus und hat somit eine entsprechende höhe. nehmen wir an, es hat 400 pixel höhe (wenn es ausgeklappt ist), mein header ist aber nur 200px hoch. lappt das automatisch in die hauptspalte über oder wird es von dieser verdeckt?

ich hoffe, ihr versteht was ich meine?

[jschma]

Das Menü "lappt" einfach über deinen Header hinaus, auch wenn dieser kleiner ist. Sieht man ja quasi bei den meisten Drop-Down Menüs...

[Thomas]

Ich denke er meint ein wenig was anderes.

Das Menü kann man platzieren wo man möchte.
Meistens befinden die sich aber im Headbereich oder aber in einem eigens definierten Bereich, im oberen Bereich der Seite. Das hängt auch ganz davon ab, wie das Layout der Seite aufgebaut ist.
Man könnte ja auch den Header um einen DIV-Container erweitern, der nur für das Menü dasein könnte.

Du siehst also, dass man da recht flexibel sein kann, immer in Abhängigkeit des Layout-Aufbaus und der eigenen Kenntnisse.

[dennis]

hallo (nach längerer zeit)!

DANKE für die antworten, das hilft mir weiter!!!

[bajdin]

Hallo,

ich will ja nicht drängen aber wann kann mann das "Modul" ungefähr erwarten?

[hansstalder]

...bin auch gespannt!

[nelhop]

Ja ich freue mich auch schon drauf

[x4all]

Dito, freue mich auch schon drauf.
VG aus Miami Beach

X4all

[x4all]

Gibt es etwas neues?

Viele Gruesse
X4all