Liste der Anhänge anzeigen (Anzahl: 2)
[ImageMenu] - Ein schönes Navigationssystem erstellen
https://community.contao.org/de/atta...achmentid=7149
Ich habe die Erweiterung "ImageMenu" in den Erweiterungskatalog gestellt.
Diese Erweiterung macht es euch einfach möglich, das ImageMenu
(Skript von Samuel Birch (phatfusion) geschrieben, MIT-Lizenz) in Contao zu verwenden.
Demo (nicht mit dieser Erweiterung erstellt):
Erweiterungskatalog:
GitHub:
Mit der Version 1.1 erfolgte ein kompletter Rewrite.
Das ImageMenu ist nun ein eingenständiges Modul (wie das Navigationsmenü). Dadurch ist z.B. auch möglich, mehrere ImageMenus zu erstellen.
Die Bilder werden in der Seitenstruktur verwaltet oder müssen manuell per CSS eingepflegt werden.
Liste der Anhänge anzeigen (Anzahl: 2)
Hallo Richard,
ich habe die ImageMenu.js.php sogar zweimal drin:
Ansonsten wird noch das eingebunden:
Die CSS-Datei wird eingebunden:
Anhang 4455
Stimmt, vor dem </body> Tag kommt dann noch:
Code:
<script type="text/javascript">
<!--//--><![CDATA[//>
<!-- window.addEvent('domready', function(){ var basicMenu = new ImageMenu($$('#imageMenu ul li a'),{
openWidth:50,
border:2,
OnClickOpen: function(e,i){ location.href = e ;}
});
} );
//-->
<!]]>
</script>
Das sind die Einstellungen, die ich gemacht habe:
Anhang 4456
Es wird nur das erste Bild links angezeigt. Sobald man drauf geht, wird es horizontal vergrößert.
Von den anderen Bildern ist nichts zu sehen, man kann auch nicht darauf gehen, d.h. kein Hover möglich.
Wenn Du willst, kann ich Dir ja mal per PM den Link auf meine Testseite schicken. Dann kannst Du es mal live anschauen.
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo Richard,
ich denke, ich habe noch ein paar kleinere Fehler im Script gefunden.
Ich habe auf meiner Seite 5 Bilder im ImageMenu.
Gebe ich nun in den Einstellungen bei "Anzahl der Menüpunkte" auch 5 ein, wird das 5. Bild nicht vollständig angezeigt, wenn ich mit der Maus auf das Bild gehe.
Gebe ich dagegen bei "Anzahl der Menüpunkte" eine 6 ein, wird das 5. Bild vollständig dargestellt...
Des Weiteren wird beim ersten Aufruf der Seite das gesamte Menü größer als gewollt und das 5. Bild immer etwas breiter dargestellt als die anderen 4 Bilder.
Sobald ich aber z.B. auf das erste Bild mit der Maus gehe und den Bildbereich dann wieder verlasse, ändert sich die Breite des gesamten Menüs und die Breite des 5. Bildes wird auch "fast" richtig angezeigt. "Fast" richtig, deswegen, weil die Breite zwar korrigiert wird, jedoch nicht auf die richtige einzelne Breite der anderen Bilder, sondern 5px breiter...
Wenn Du noch einmal auf meine Testseite (PM von gestern) gehst, kannst Du Dir das noch einmal anschauen.
Meine derzeitigen Einstellungen:
Anhang 4459
Das Bild selbst hat eine Höhe von 110px und eine Breite von 191px.
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo Richard,
ich bin wieder aus dem Kurzurlaub zurück und habe gleich mal Deine neue Version ausprobiert.
5 Bilder für 5 Menüpunkte.
Die Breite des Menüs soll 450px sein, d.h. jeder Menüpunkt hat dann zwangsläufig 90px.
Also sollte das Menü sein: 5x 90px + 4x 2px Rand rechts= 458px ...
Auch mit der neuen Version ist das 5. Bild beim Aufruf der Seite in zusammengeklapptem Zustand als auch im gehoverten Zustand nicht so breit wie die anderen Bilder. Gibt es hier ein Problem beim Berechnen der Breiten?
Hier noch mal die Ausgabe der ImageMenu.css.php:
Zitat:
#imageMenu {
position:relative;
width:450px;
height:110px;
overflow:hidden;
}
#imageMenu ul {
list-style:none;
margin:0;
padding:0;
display:block;
height:110px;
width:550px;
}
#imageMenu ul li {
float:left;
}
#imageMenu ul li a {
text-indent:-1000px;
cursor:pointer;
display:block;
overflow:hidden;
width:90px;
height:110px;
border-right:2px solid #FFFFFF;
}
#imageMenu ul li a.startseite {
background:url("../../../../tl_files/phatfusion/image.jpg") no-repeat left top;
}
#imageMenu ul li a.content_elemente {
background:url("../../../../tl_files/phatfusion/image.jpg") no-repeat left top;
}
#imageMenu ul li a.insert_tags {
background:url("../../../../tl_files/phatfusion/image.jpg") no-repeat left top;
}
#imageMenu ul li a.module {
background:url("../../../../tl_files/phatfusion/image.jpg") no-repeat left top;
}
#imageMenu ul li a.menues {
background:url("../../../../tl_files/phatfusion/image.jpg") no-repeat left top;
}
sowie die Einstellungen innerhalb Contaos:
Anhang 4487
Ändere ich über die Webdeveloper-Toolbar im Firefox bei #imageMenu die Breite von 450px manuell auf 458px, wird das 5. Bild von der Breite her sofort angepasst, aber nur solange ich nicht hovere, denn dann passt die Breite des 5. Bildes wieder nicht mehr... ??
Soviel von meiner Seite.
Neue Version 1.0.1 rc2 - für Conto 2.10
Für - und auch nur für Contao 2.10 habe ich eine neue Version hochgeladen.
Die Templates wurden angepasst (.html5, .xhtml) und das Script wurde auf MooTools 1.3 angepasst, siehe https://github.com/samuelbirch/ImageMenu/pull/1.
Wenn alles funktioniert, wird die Erweiterung wohl mit der Funktionalität des Color-Pickers staple.
@Rundinhio: Problem war, dass Slideshow die MooTools-Version 2.3 mitbringt (nicht wie in Contao 2.9.5 Version 1.2.5) und so der Fehler auftrat. In dieser Version wurde das angepasst.
Liste der Anhänge anzeigen (Anzahl: 2)
Weltklasse - aber funktioniert bei mir leider (noch) nicht.
Hallo in die Runde,
genauso ein Menü habe ich gesucht - supertoll. Leider bekomme ich es nicht richtig eingebunden.
Erst seit ein paar Wochen steige ich in Contao ein. Vielleicht könnte mir ja jemand helfen?
Ich schildere mal meine Vorgehensweise:
Über den Erweiterungskatalog habe ich ImageMenu 1.0.1 rc1 Build 7 heruntergeladen und installiert.
Bei den Einstellungen habe ich alles Relevante eingetragen:
Anhang 5004
Die Menüpunkte sind alle in der Seitenstruktur vorhanden.
Ein Frontend-Modul mit dem Titel "Navigation - ImageMenu" vom Typ Navigationsmenü und dem Navigationstemplate nav_imagemenu.tpl habe ich eingerichtet. Bei der CSS-ID/Klasse habe ich imageMenu eingetragen (hier ist mir nicht ganz klar, woher das gezogen werden soll).
Anhang 5005
In meinem Standart-Seitenlayout habe ich das Modul in der Kopfzeile eingebunden und bei den MooTools-Templates das moo_imagemenu angehakt.
Die Menübilder sind leider nicht sichtbar.
Im FF ist das Standartmenü hinter dem Text, man kann aber im oberen Bereich durch das (nicht vorhandene Menü) klicken. Im IE werden die nicht sichtbaren Bilder beim Klicken gepunktet markiert und man kann sie als slidende Rahmen erkennen.
Hat hier jemand eine Idee?
Den Seitenquelltext habe ich auch einmal verlinkt.
Ich bin für jede Hilfe dankbar.
Liebe Grüße
Christian
_________
Contao 2.9.5
1&1 Server
Imagemenu ... noch ein Bug der mir aufgefallen ist ...
Vielleicht ist es auch nur ein Feature ;-)
Wenn ich das moo_imagemenu im Seitenlayout aktiviere ist ja das für die ganze Seite gültig. Habe nun bemerkt dass dieser Umstand mir das MenuMatic Topmenu nicht mehr richtig anzeigt ... und zwar auf der Startseite und Unterseiten (test.luciano.ch).
Wenn man über die Punkte Seite01 & Seite02 fahrt, sieht man abgerundete Ecken und die Position ist auch direkt unter dem Menü Punkt. So wie es aussieht wird das CSS von Menumatic teilweise über-steuert. Auf jeden Fall sieht es nicht aus wie es sollte.
Erstaunlicherweise wenn man aber einen Punkt aus dem Untermenus ausgewählt hat wo sich Imagemenu befindet (Seite01 > ImageMenu), wird MenuMatic richtig angezeigt. Habe mit dem Firebug versucht das Problem einzugrenzen habe aber nichts raus gefunden.
Habe im Ordner wo die Erweiterung installiert ist eine ...css.php Datei gesehen welche auch ein CSS generiert.
Im Moment Habe ich auf der Seite wo ich die Demo installiert habe (ciaobello.luciano.ch) ein zweites Seitentemplate machen müssen welches die moo_ImageMenu einbindet und es nur für die entsprechenden Seiten auswählen. Sollte meines Erachtens auch mit aktiver moo_ImageMenu funktionieren oder ?
Danke für jegliche Hinweise zum beheben dieses Bugs.
Ciaobello