Hallo eldios,
die CSS-ID "nav" wird bei Dir sowohl dem umschließenden <div>-Container als auch dem <ul>-Element zugewiesen. Eine CSS-ID darf aber pro Seite nur ein einziges Mal verwendet werden! Das nur mal so auf die Schnelle...
Druckbare Version
Hallo eldios,
die CSS-ID "nav" wird bei Dir sowohl dem umschließenden <div>-Container als auch dem <ul>-Element zugewiesen. Eine CSS-ID darf aber pro Seite nur ein einziges Mal verwendet werden! Das nur mal so auf die Schnelle...
Tut mir leid, dass ich auch nochmal diese eigentlich unnötoge Frage stellen muss, aber obwohl ich ca. 20 Beiträge und 2 Anleitungen gelesen habe schaffe ich es einfach nicht ein javascript in meine Seitenlayout einzubinden.
Habe unter "Seitenlayout" -> "Eigener Java-Script Code" das hier eingefügt:
Nun lese ich ab und zu man soll <script> nicht erlauben unter Einstellungen, manchmal doch, wie auch immer es funktioniert nicht und das nervt nach 3 Stunden Suche tierisch. Bitte helft mir. :(Code:<!-- Load the MenuMatic Class -->
<script src="js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>
<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
window.addEvent('domready', function() {
var myMenu = new MenuMatic();
});
</script>
Hallo Mr. Burns,
Das funktioniert einwandfrei, wenn Du diesen Code (1:1 so wie er da steht) in das von Dir genannte Feld reinkopierst. Kannst Du gerne auch in der Contao Online Demo probieren. Wenn das bei Dir (auch nach dem Bereinigen des Caches) nicht funktioniert, vermute ich (wieder mal) ein eigenes (altes, nicht aktualisiertes) Seitentemplate dahinter. Dafür wärst Du nämlich selbst verantwortlich!
In diesem Fall brauchst Du das <script>-Element nicht zur Liste der "Erlaubten HTML-Tags" hinzufügen. Das "Seitenlayout" bildet in dieser Hinsicht eine Ausnahme, überall sonst wird dieses Tag standardmäßig durch Contao entfernt.
Danke für deine Antwort, was meinst du mit nicht aktualisiertem Seitentemplate? :eek:
Schau mal in das Backend-Modul "Templates". Gibt es dort ein Template "fe_*"?
Nein, so beginnt kein Template bei mir ...
Ok, dann liegt es also nicht am Template. Was genau funktioniert denn dann nicht? Wird dieser oben von Dir gepostete Script-Code im Seitenquelltext ausgegeben oder nicht? Dass Du den Pfad zum Skript (hier im Beispiel "js/MenuMatic_0.68.3.js") entsprechend anpassen musst, wird wohl auch verständlich sein.
Ja, den Pfad habe ich angepasst, eben wo meine Dateien liegen.
Die Navigation funktioniert rein von der CSS-Datei her soweit, es fehlt eben bloß der schöne Effekt der vom Javascript kommen soll.
Hab Cache geleert, Daten bereinigt, den Pfad überprüft ... nichts.
Die CSS-Datei findet er, das Javascript nicht.
Du kannst die JS-Datei also nicht direkt im Browser aufrufen oder? Erhälst Du eine Servermeldung, 403 oder 404?
Hast Du einen Link zur Seite?
Javascript lässt sich wenn ich den Pfad direkt im Browser eingebe aufrufen.
Dein JavaScript-Code ist nicht ganz korrekt. Es fehlen die schließenden Klammern! Probier's mal damit:
HTML-Code:<!-- Load the MenuMatic Class -->
<script src="MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>
<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
window.addEvent('domready', function() {
var myMenu = new MenuMatic({ orientation:'vertical' });
});
</script>
Perfekt, das war der Fehler!
Vielen Dank!! :):D
Hallo,
ich habe mit MenuMatic nach der Anleitung im Wiki ein Menü gebaut, habe aber noch einige Probleme, (mit Firefox 5 und 6 und Ie8 identische Probleme)
Die Breite der Untermenüfenster ist immer gleich breit und manchmal zu kurz für einige Menüpunkte, obwohl ich die Breite niemals irgendwo eingestellt habe. Längere Menüeinträge werden umgebrochen.
Um den Umbruch zu verhindern habe ich als Tipp gelesen, man soll bei #subMenusContainer a,#nav li li a white-space:nowrap; hinzufügen.
Das geht auch, aber dann schreibt er die Untermenüpunkte einfach über den Rand des Untermenüfensters.
Wenn man mit der Maus über einen Untermenüpunkt geht, schneidet er die überstehenden Einträge richtig ab, aber eigentlich soll er ja schon vorher die Menüfensterbreite je nach Breite der längsten Untermenüzeile einstellen.
Und während man den Mausbutton auf einem Menüpunkt gedrückt hält, wird der Balken plötzlich zu breit angezeigt.
Habt ihr eine Idee, wie man die Breite der MenuMatic-Fenster variabel hinkriegt?
Oder wo man eine feste Breite überhaupt einstellen kann?
Oder wo man ungefähr im Javascript oder Stylesheet die Ursache dieser Probleme suchen kann?
Hallo,
irgendwo muss eine Breite definiert sein.
Kontrolliere bei
#subMenusContainer
#subMenusContainer li
#subMenusContainer a
#nav li li
#nav li li a
MenuMatic berechnet die notwendige Breite selbst, formatiere deshalb nur die <a> tags per padding
Danke, es war in #nav li ul und in #nav li li a:focus die Voreinstellung 10 em für width. Wenn man die wegnimmt, geht die automatische Breite.
Hallo nochmal, der ausgewählte Hauptmenüpunkt wird immer kursiv angezeigt.
Wie kann man denn dem ausgewählten Hauptmenüpunkt eine Hintergrundfarbe geben?
Ich habe einiges ausprobiert und dachte, man kann das mit der Hintergrund-Farbeinstellung von
#nav li.active machen, aber es geht so leider nicht. Habt ihr einen Tipp?
Hallo tim_,
der Hauptmenüpunkt ist kursiv, weil der in einem <em> ist. Steht auch extra im Tutorial. Das kannst du dann mittels CSS anders Formatieren.
Hintergrundfarbe #nav li oder #nav li a oder oder oder du guckst mal mit Firebug und probierst da aus.
Viele Grüße
Hallöö,
kann mir wer verraten wie ich menuMatic dazu bekomme per mausklick zu öffnen statt mit mouseover ? :(
Immer diese "mir gefällt das nicht bitte machen sie das anders" Wünsche, :eek:
Mal in der .js Datei suchen?
hab mich mal durch den Dschungel gewuselt, aber richtige Anhaltspunkte hab ich nicht gefunden.
In der js fand ichIn der mootools-core.js findet sich dannCode:F.addEvents({mouseenter:function(G){this.childMenu.fireEvent("show");
In der tpl findet sich $item['isActive']Code:new Hash({mouseenter:{base:"mouseover",condition:a}
Kann ich aber auch nichts mit anfangen.
Das ganze wurde auch schonmal besprochen im Januar, aber ohne richtige Lösung.
Das Accordion soll ja angeblich in dieser Form mal geändert worden sein, aber die navi ist wieder etwas anders
Hallo zusammen,
wie vielleicht schon dem ein oder anderen aufgefallen, gibt es Darstellungsprobleme der Animationen im Internet Explorer 7/8 unter Mootools 1.3.
Das Menü klappt sich ruckelnd auf und die Mouseover-Effekte ab Level 2 erscheinen bei einem oder eventuell noch einem zweiten Navigationspunkt. Unter http://greengeckodesign.com/mootools-13-compatibility gibt es in den Kommentaren ein Workaround.
Leider blicke ich nicht ganz durch, wo bei Contao 2.10.x definiert ist welches Mootools-Script (Version) geladen werden soll.
Wie es aussieht werden dynamisch erzeugte komprimierte Scripts geladen, z.B. "system/scripts/6bb6ab418aaa.js"
Um MenuMatic unter Internet Explorer 7/8 lauffähig zu machen, muss ich eine Abfrage für die IE-Versionen erstellen und das Laden von Mootools 1.2 oder 1.3 davon abhängig machen.
Meine Frage daher, weiß jemand wie das umsetzbar ist, bzw. inwiefern Contao 2.10.x das verträgt.
Liebe Grüße,
Daniel
Nachtrag:
Ich habe nun festgestellt, dass das Problem zum einen durch eine Kombination von "MenuMatic" + "Moosizer" entsteht.
Nutze nun für den Moosizer jQuery, doch MenuMatic spinnt immernoch unter IE7 und IE8.
Bin etwas ratlos.
Nachtrag 2:
Habe nun rausgefunden, dass alles Käse war mit der Mootools-version, sondern es einzig und allein am CSS von dieser Quelle lag: http://www.selected-items.com/drop-d...nu-fur-contao/
Dort hatte ich ein reduziertes Stylesheet entnommen, dass etwas übersichtlicher war, als das von greengeckodesign. Fakt ist, dass es mit jedem Browser irgendeinen anderen Bug verursacht hat. Habs nun mit dem Original CSS aufgebaut und nun gibt's keine Probleme mehr.
Manchmal ist man echt richtig auf dem falschen Dampfer. Sorry.
Hallo,
kleines Problem: Die Navigationspunkte, die Unterpunkte haben (und NUR die), haben einen Versatz unten zum nächsten Element. Firebug zeigt mir an, dass sich dort im Quelltext eine leere Zeile befindet. Löscht man die im Firebug Quelltext, ist der Abstand weg. Im Template ist das folgende Stelle:
Bin etwas ratlos. Hier ein Link, wo man es sehen kann (WIP): http://dsc.ontrack-media.com/PHP-Code:
</em></a>***HIER kommt die Leerzeile***<?php echo $item['subitems'];?></li>
Hat jemand eine Idee, wie dieser Fehler entsteht und wie er sich lösen ließe...?
Danke und LG
Gurth
Nicht wundern: der Versatz (wenn man sich meinen Link ansieht) ist weg, weil ich es über eine negative margin gemacht habe. Aber das kann nicht die Ideallösung sein. Die leere Zeile im Quellcode ist immer noch da und stört.
Hallo Gurth,
am Template kann ich jetzt keinen Fehler entdecken (weiß nicht ob bei dir was ist...).
Hast du vllt eine Leerzeile im Backend drinn bei dem Menüpunkt?
Viele Grüße
Nein, da ist alles sauber. Ist aber nicht schlimm, ich bleibe erstmal bei der "dirty"-Lösung mit der negativen Margin. Die scheint stabil zu laufen... ;-)
LG Gurth
Ich habe ein kleines Problem mit dem MenuMatic:
Die erste Ebene hat schön die CSS-Klasse eingetragen, die ich der entsprechenden Seite mitgegeben habe. Beim Öffnen des Menüs sind bei den Unterpunkten aber diese Klassen nicht mehr zu sehen, auch nicht viel weiter oben in dem CSS-Selektor-Pfad.
Wie bekomme ich dort noch eine Klasse eingetragen, ich muss die Menüs unterschiedlich farbig gestalten und das geht nur über eine Klasse, die dann auch auftaucht.
Hallo do_while,
eigentlich sollte eine Klasse übergeben werden ( <?php echo $item['class']; ?> ).
Reicht es nicht wenn die Punkte der ersten Ebene eine Klasse haben? Damit sollte man ja per li.klassenname li oder li.klassenname li a die Formatierung vornehmen können?
Vllt kann man ja was sehen wenn du uns einen Link gibst (ich muss zugeben, das ich das Menü bei meinen Projekten eigentlich nicht einsetze und das ganze nur ein Test war ob das überhaupt funktioniert *g* deswegen kann ich bei mir nicht nachgucken).
Viele Grüße
Hallo MacKP,
Du bist ja wieder sehr schnell.
Leider ist die Seite noch Offline. Ich habe schon mit Firebug gesucht, aber da die Menüebenen einzeln per JavaScript (mootools) aufgebaut werden, haben sie leider von den Klassen her keinen Zusammenhang mit den höheren Ebenen mehr. Die Ebenen werden ja als einzelne Bereiche über den Bildschirm geslidet.
Ich habe schon vieles versucht, bin aber noch nicht dahinter gekommen. Bei Template-Anpassungen habe ich entweder die Klasse nicht drin oder aber in allen Menüteilen die gleiche Klasse.
Ich dachte nur, vielleicht kennt schon jemand eine Lösung dazu.
Hallo,
manchmal ist es so einfach, man muss es nur mal aufgeschrieben haben.
Ich sehe zwar nicht die Klasse der übergeordneten Seite, kann jedoch der Seite, die für den Menüpunkt zuständig ist die gleiche Klasse mitgeben (in der Seitenstruktur). Schon ist dort auch im Menü die Klasse drin. Problem gelöst!
Hey :)
Ich habe das Aufklappmenü mal zu Testzwecken installiert. Jedoch habe ich folgendes Problem :
Beim Aufruf der Seite wird folgender Fehler ausgegeben :
Was habe ich falsch gemacht? Ich habe folgende Anleitung zur Installation befolgt : http://www.youtube.com/watch?v=exgKz...ayer_embedded#!Code:Notice: Using .tpl files (templates/nav_menumatic.tpl) is deprecated. Please use the new .html5 and .xhtml files instead. in C:\xampp\htdocs\system\libraries\Controller.php on line 147
#0 [internal function]: __error(1024, 'Using .tpl file...', 'C:\xampp\htdocs...', 147, Array)
#1 C:\xampp\htdocs\system\libraries\Controller.php(147): trigger_error('Using .tpl file...', 1024)
#2 C:\xampp\htdocs\system\libraries\Template.php(246): Controller->getTemplate('nav_menumatic', 'html5')
#3 C:\xampp\htdocs\system\modules\frontend\FrontendTemplate.php(49): Template->parse()
#4 C:\xampp\htdocs\system\modules\frontend\Module.php(341): FrontendTemplate->parse()
#5 C:\xampp\htdocs\system\modules\frontend\ModuleNavigation.php(94): Module->renderNavigation('1')
#6 C:\xampp\htdocs\system\modules\frontend\Module.php(140): ModuleNavigation->compile()
#7 C:\xampp\htdocs\system\modules\frontend\ModuleNavigation.php(69): Module->generate()
#8 C:\xampp\htdocs\system\libraries\Controller.php(344): ModuleNavigation->generate()
#9 C:\xampp\htdocs\system\modules\frontend\PageRegular.php(100): Controller->getFrontendModule('2', 'header')
#10 C:\xampp\htdocs\index.php(200): PageRegular->generate(Object(DB_Mysql_Result))
#11 C:\xampp\htdocs\index.php(319): Index->run()
#12 {main}
Mit freundlichen Grüßen,
m.hrast
Hallo,
ich habe die vertikale Navigation mit Mootools Aufklappmenü MenuMatic erstellt. Ich finde es eine gute Lösung. Bisher hatte ich die Homepage immer mit meinem Notebook (Firefox und IE8) betrachtet. Heute hatte ich dann die Möglichkeit, auf einem Monitor wo nur IE8 (dann später IE9 drauf gespielt) installiert war und war entsetzt. Die Darstellung des Navigationsmenü (vertikal) wird versetzt und falsch dargestellt. Ich weiß nicht, woran das liegen kann. Hier die Seite: http://www.sun2-systems.de .
Für Eure Hilfe danke ich und sage bis denn.
VG Lea
Hallo Lea
zu Deinem IE9 kann ich leider nichts sagen, da nicht installiert. Aber bei mir ist schon im FF 7.0.1 Dein Menü komisch.
Die Unterpunkte klappen immer ein Level zu tief auf.
L1 ................. L2 zu unternehmen
Unternehmen
Produkte ......... Adressen und Kontatkdaten
xx................... Anfahrt
....
Ich brech mir fast die Hand , um überhaupt von Unternehmen nach Adresse zu kommen
Der dritte Level beim "Solarmodule" ist dann nochmals verschoben, da stimmt imho irgendein Abstand nicht
Kann es sein, dass da grundsaetzlich was falsch läuft ?
Leider nur eine Beobachtung ohne jegliche Lösung.
Hallo zusammen,
ich würde gerne Menumatic in der zweiten Ebene mit Image_Headline kombinieren.
Im Prinzip läuft das super, nur leider geht das auf alle Level. Nun sind alle Navigationspunkte Grafiken.PHP-Code:
ul.level_1 a
{
margin-top:10px;
margin-bottom:0;
padding:0;
font-size:9pt;
font-weight:normal;
color:#111;
text-transform:uppercase;
letter-spacing:0.91pt;
font:specialfont;
}
Ich möchte aber nur die erste Horizontale Ebene durch Grafiken ersetzen und die Unterpunkte im 2. und 3. Level sollen die gewöhnliche Text-Arial haben.
Die Frage ist, wo ich eingreifen muss, dass ich ganz klar nur die Links des ersten Levels anspreche.
Hat da jemand Erfahrung?
Liebe Grüße,
Daniel
Dann musst du den Wert eben für die darunter liegenden Ebenen wieder überschreiben.
Viele Grüße
Habe ich probiert.
Trozdem werden alle Level-Inhalte durch die Image_Headline-Grafiken ersetzt.PHP-Code:
ul.level_2 a, ul.level_3 a { font:Arial,sans-serif; etc. }
Das Problem liegt glaube ich daran, dass man im Seitenlayout eine CSS-Datei auswählt, die er für das Ersetzen von Text in Grafiken verwendet.
Wenn ich in dieser CSS-Datei den level_1 angebe, dann nimmt er wahrscheinlich alles für die Image_Headline was unterhalb von level_1 auch noch kommt. Level_2 und Level_3 sind ja dem Level_1 untergeordnet.
Somit überschreibt er mir das automatisch, auch wenn ich im Haupt-CSS angebe, er soll die Arial für die anderen Levels nehmen.
Hmmm..., es sei denn, ich gebe den Links in Level_1 eine Klasse; vielleicht soWeißt Du wo ich da im nav_template eingreifen kann, oder muss ich da das JS verändern?PHP-Code:
ul.level_1 a.spezialklasse { ... }
Liebe Grüße,
Daniel
Hallo djo,
ich glaub nicht, das die Spezialklasse da was drann änder wird, da das ja das selbe Element ist was du ansprichst.. das a müsste ja schon passen, da Navigationselemente ja nicht in dem a liegen (sonst hätte der IE6 ja nicht seine Problemchen *g*).
Aber an sich müsste es reichen, wenn du den betreffenden Seiten eine Klasse in der Seitenstruktur gibst. Die wird dann auch da gesetzt. Versuch macht ja bekanntlich Klug (oder besser -> weniger dumm).
Viele Grüße
Ausgezeichnet! Funktioniert nun wie folgt:
Die entsprechenden Seiten in der Seitenstruktur erhalten die Klasse "navfirstlevel", dann im CSS:
und voilà - Die Grafiken werden nur im ersten Level geladen.PHP-Code:
a.navfirstlevel
{
margin-top:10px;
margin-bottom:0;
padding:0;
font-size:9pt;
font-weight:normal;
color:#111;
text-transform:uppercase;
letter-spacing:0.91pt;
font:spezialfont;
}
Vielen Dank! Super Sache - bin ich garnicht drauf gekommen :)
Klasse Thread!
Liebe Grüße,
Daniel
Gestern Nacht ist es gelungen in eine MenuMatic-Seite jquery funktionierend einzubinden. Leider kommt bei der Initialiserung von MenuMatic ... var myMenu = new MenuMatic(); der Fehler: "$(this.options.id).getElements is not a function"
genauer: in MenuMatic_0.68.3-source.js in der Zeile 201 beim Statement
var links = $(this.options.id).getElements('a');
Zu sehen unter http://neu.reisetraeume.de/kapverden...-formular.html (user:contao / pw: Standard von der Installation)
Frage: kann es sein, dass MenuMatic aus 2008 nicht den Mode Dollar Safe Mode™ von MooTools 1.2.3. benutzt? Siehe unter
http://mootools.net/blog/2009/06/22/...lar-safe-mode/ Abschnitt Plugins.
Wie müsste die Syntax in MenuMatic dann aussehen
Hallo geraldo,
ich weiß nicht obs bei dir schon so ist oder ob es helfen würde, aber hast du jquery in sowas wie einem conflict modus laufen?
Viele Grüße