[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):

http://netweblogic.com/demos/phatfusion/imagemenu/

Erweiterungskatalog:

http://www.contao.org/de/extension-l...geMenu.de.html

GitHub:

https://github.com/richardhj/contao_imagemenu

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.

Hi.

Schön! Danke.
Aber warum nicht 2-3 Monate früher? Dann hätte ich mich manuell nicht so quälen brauchen... *joke* ;)

Ich werds auf jeden Fall mal ausprobieren. Vielleicht ersetze ich meine manuelle Variante - mich nervt da nämlich das Handling mit den vielen Seitenlayouts.

Gruß
Thomas

Tolle Sache! Super, was es hier für Contao alles für Module und Erweiterungen gibt. Das lässt phpwcms schnell vergessen.

Das kniffligste war tatsächlich, dass der aktive Menüpunkt Menüpunkt offen bleiben soll. Am Ende habe ich das dann im nav_imagemenu-Template gelöst.

@tblumrich: Das Thema habe ich auch gelesen. Da dachte ich, das muss doch noch irgendwie anders gehen. :)

Ja wieso nicht früher :)
Danke auf jeden Fall das kann ich 100% gebrauchen.

Noch eine Frage, in den Demos wird gezeigt das es jQuery ist (laut titel).
Läuft deine Erweiterung mit MooTools oder jQuery?

Das Beispiel soll nur zeigen, wie so ein ImageMenu aussehen kann.
Diese Erweiterung läuft mit MooTools.

EDIT: Ich habe oben die Demo geändert.

Hallo Richard,


gibt es denn eine Contao-Seite mit Deinem Phatfusion-Menü als Demo?

Ich bekomme das Menü irgendwie nicht hin, es wird mir immer nur das erste von fünf Bildern angezeigt...

Hallo Richard,

an einer Stelle (ImageMenu.js.php) benutzt Du

Code:

---

<?php echo $_GET['open'] ?>

---

Soweit ich sehen kann, ist der Parameter 'open' immer numerisch; dann beuge bitte unbedingt Attacken/Spammern vor mit

Code:

---

<?php echo intval($_GET['open']); ?>

---

Das liefert dann einfach 0, falls jemand Müll übergibt. Erwartest Du anderes als ganze Zahlen im Parameter, dann musst Du

Code:

---

$this->Input->get('open');

---

benutzen. Ich bin zwar kein Hacker, aber dennoch ziemlich sicher, dass an der Stelle eine beliebige JS Funktion aufgerufen werden kann, die dann zur Tarnung eine Zahl zurückliefert ... aber vorher alles mögliche Unerwünschte tut! Generell: nie, NIE, NIEMALS, wirklich NIEMALS UND NIMMER Werte vom Besucher/Browser/Server ungeprüft übernehmen und verwenden!!! In Contao immer die Klasse "Input" verwenden, dazu ist sie da!

LG, Georg

Danke, Georg.

@jscholtysik
Überprüfe bitte zuerst, ob du die aktuelle Version (auch Build) verwendest, denn im rc1-Status kommen viele Aktualisierungen.

Hallo Richard,


auch bei der Version 1.0.0. rc1 Build 23 habe ich noch genau das gleiche Problem... :o

Gehören denn nur die Bild-Definitionen in die CSS-Datei? Der Rest der CSS-Definitionen, d.h. alles, was unter "Einstellungen" eingetragen wird, kommt ja, wie ich sehe, in die ImageMenu.css.php...

Ansonsten bin ich genau nach "Anleitung" in der Erweiterungsverwaltung vorgegangen.

Wenn schon ein Teil des CSS in der ImageMenu.css.php abgelegt und verwendet wird, wäre es da nicht sinnvoll, die Bilddaten auch direkt in den Einstellungen abzufragen und einzugeben oder sogar nur über den Dateimanager auszuwählen und dann auch in die ImageMenu.css.php zu schreiben, so dass gar keine eigene CSS-Datei mehr notwendig wäre?

Oder Du machst gleich ein eigenes Modul daraus und lässt dann da die ganzen Einstellungen machen...

Nur so ein Gedanke...

Das ist eine gute Idee, nur muss das Ganze erst einmal auch so laufen.

Überprüfe doch mal bitte, ob die ImageMenu.js.php mit einem Parameter (wenn Einstellung zum Offenbleiben an ist), z.B. 'open=2', eingebunden ist. Also:

HTML-Code:

---

<link rel="stylesheet" href="system/modules/imagemenu/html/ImageMenu.css.php" type="text/css" media="screen" />
<script type="text/javascript" src="system/modules/imagemenu/html/ImageMenu.js.php?open=2"></script>

---

Und die CSS-Datei ist auch so eingebunden?

Dann muss nur noch vor dem </body>-Tag z.B. so etwas stehen:

HTML-Code:

---

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function(){
        var basicMenu = new ImageMenu($$('#imageMenu ul li a'),{
                openWidth:400,
                border:2,
                OnClickOpen: function(e,i){ location.href = e ;}
        });
        }
);
//--><!]]>       
</script>

---

Was meinst du mit "es wird mir immer nur das erste von fünf Bildern angezeigt"? Etwa das nur das Erste offen ist, oder etwa, ob die Anderen nur so klein sind, so dass man nur das Erste sieht; also probiere bitte mal aus, ob man die Anderen beim Hovern öffnen kann.

Hast du die Option zum Offenbleiben unter den Einstellungen aktiviert?

Hallo Richard,


ich habe die ImageMenu.js.php sogar zweimal drin:

Code:

---

<script type="text/javascript" src="system/modules/imagemenu/html/ImageMenu.js.php?open=0"></script>
<script type="text/javascript" src="system/modules/imagemenu/html/ImageMenu.js.php?open=15"></script>

---

Ansonsten wird noch das eingebunden:

Code:

---

<link rel="stylesheet" href="system/modules/imagemenu/html/ImageMenu.css.php" type="text/css" media="screen" />
<link rel="stylesheet" href="phatfusion.css?1308140223" type="text/css" media="all" />

---

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.

An alle Mitlesenden:
Am Ende war die Lösung doch so einfach: Bitte Stoplevel in der Navigation setzen, damit so die Untermenüpunkte nicht angezeigt werden/im Quelltext stehen.

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.

Eine neue Version ist nun im Erweiterungskatalog.

Hintergrundbilder können jetzt direkt unter den Einstellungen eingestellt werden. Deshalb ggf. zuvor erstellte CSS-Anweisungen bitte löschen, da überflüssig.

@Joachim
Bitte lösche beim letzten Bild die Breitenangabe. Ah, du musst ja eh alle CSS-Anweisungen für das ImageMenu löschen. :D

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.

Hallo,

erst einmal vielen Dank für diese praktische Erweiterung.

Allerdings habe ich ein Problem mit dem Imagemenu. Und zwar wird nur das Bild "geslidet" welches ich zuerst überfahre in dem Menü. Wenn ich dann ohne das Imagemenu zu verlassen auf einen anderen Punkt gehe bleibt dieser geschlossen.
Ich muss erst wieder das Menü mit der Maus verlassen und kann dann auf einen anderen Menüpunkt gehen der dann den Slide-Effekt auch bekommt.

Ist das Problem schon jemandem bekannt und von wem gelöst worden?

Hier noch ein Link zum draufschauen: cms.werbestudio-albers.de

Gruß
Nikolas

Hallo,

habe ich das jetzt richtig verstanden, an der Erweiterung wird noch optimiert?

Auf dieser Demoseite sieht das ja recht flott aus. Gibt es schon eine Vorstellung wann es fertig sein könnte und wird es eine Help-Datei zum Einbau geben?

Gruss Ria

Hallo, Ria,
installieren könntest du die Erweiterung schon, einbinden auch. Soviel wird es nicht mehr geben, das optimiert werden muss. Eine Help-Datei wird es wohl nicht geben, aber sag Bescheid, sobald du etwas nicht verstehst. (Anleitung ist im Beschreibungstext)

Hallo, Rundinhio,
als ich das erste und zweite mal geguckt habe, war ich verzweifelt. Einzig habe ich vermutet, dass das mit der Slideshow zu tun hat.
In deinem Quelltext steht aktuell:

HTML-Code:

---

<script type="text/javascript" src="plugins/slideshow2/mootools/mootools-core.js"></script>
<script type="text/javascript" src="plugins/slideshow2/mootools/mootools-more.js"></script>

---

Das ist nicht original Contao. Original ist - ob mit oder ohne Parameter am Ende der URL:

HTML-Code:

---

<script type="text/javascript" src="plugins/mootools/mootools-core.js?1.2.5"></script>
<script type="text/javascript" src="plugins/mootools/mootools-more.js?1.2.5.1"></script>

---

Jetzt musst du nur noch das

HTML-Code:

---

<script type="text/javascript">
<!--//--><![CDATA[//><!--

window.addEvent('domready',function()
{
        var images_1 = {'tl_files/slider/startseite/bild1.jpg':{caption:'<p>Startseite<\/p>'},'tl_files/slider/startseite/bild2.jpg':{caption:'<p>Startseite<\/p>'},'tl_files/slider/startseite/bild3.jpg':{caption:'<p>Startseite<\/p>'}};

        var show_1 = new Slideshow('show_1', images_1,
        {
                width: 472,
                height: 479,
                delay: 3000,
                duration: 1000,
                transition: 'quad:in',                loop: true,
                paused: false,
                random: false,
                controller: false,
                fast: 0,
                thumbnails: false,
                captions: false        });
});

//--><!]]>
</script>

---

entfernen, schon funktioniert alles wie gewollt.
Vielleicht muss die Bibliothek in der slideshow-Erweiterung aktualisiert werden. Vielleicht.

Hallo, jscholtysik,
das ist mir auch schon aufgefallen, allerdings ist das bei der manuellen Variante von tblumrich auch so. Vergleich doch mal die Länge mit einem Messwerkzeug vom Letzen mit den Anderen. Das letzte Objekt ist 10px kürzer.

Zitat:

---

Zitat von tl_richard_user

Hallo, jscholtysik,
das ist mir auch schon aufgefallen, allerdings ist das bei der manuellen Variante von tblumrich auch so. Vergleich doch mal die Länge mit einem Messwerkzeug vom Letzen mit den Anderen. Das letzte Objekt ist 10px kürzer.

---

Kann ich nur bestätigen. Ich hab da auch schon einiges rumprobiert und keine geeignete Lösung gefunden.
Am Ende sagte selbst der Kunde, das das Gewackel doch kaum auffällt, daher hab ich das nicht weiter verfolgt.

Gruß
Thomas

Hallo Richard,


hm, naja, jetzt einfach zu sagen, dass die paar fehlenden Pixel beim letzten Bild ja eigentlich nichts ausmachen und quasi vernachlässigt werden können, kann aber nicht die "Lösung" sein... :( Da läuft irgendwas in Deinem Script nicht richtig, nur leider finde ich das nicht raus, da ich kein Programmierer bin...:o
Schön wäre es schon, eine saubere Lösung hin zu bekommen, so wie es auf der Demoseite http://netweblogic.com/demos/phatfusion/imagemenu/ ja auch sauber funktioniert. Da sind alle Bilder am Anfang IMMER gleich groß und auch wenn ein Bild gehovert und dadurch vergrößert wird, bleiben die anderen Bilder untereinander auch IMMER gleich groß.
Leider ist die Demoseite ja keine Contao-Seite, deshalb wäre es super, wenn das Menü mit Deiner ImageMenu-Erweiterung in einer Contao-Seite eingebunden wäre...

Viele Grüße.

Auch in der Demo - ich habe in Opera so ein Messtool - sind die Bilder offen 310px groß, das Letzte aber nur ca. 303px. Das fällt aber nicht auf! (Nur bei dir, auf deiner Seite, fällt das durch die Schrift auf.)
Und das ist sogar m.E. so gewollt! Denn wenn du mit Firebug / Opera Dragonfly vom <div id="imageMenu"> die CSS-Zuweisung "overflow:hidden;" entfernst, dann flattert das letzte Bild. Am besten ausprobieren.

Hallo Richard,


ich denke, ich habe eine Lösung gefunden.

In der Datei "ImageMenu.js.php" die Zeilen 146-148 (Zeile 147) ändern:

Alt:

Code:

---

            if(i == this.elements.length-1){
                w = width+5
            }

---

Neu:

Code:

---

            if(i == this.elements.length-1){
                w = width
            }

---

Damit ist das Problem gelöst, dass das letzte Bild immer 5 Pixel mehr hat.


In der Datei "ImageMenu.css.php die Zeilen 41-46 ändern (Zeile 43):

Alt:

Code:

---

#imageMenu {
    position:relative;
    width:<?php echo $width['value']; echo $width['unit']; ?>;
    height:<?php echo $height['value']; echo $height['unit']; ?>;
    overflow:hidden;
}

---

Neu:

Code:

---

#imageMenu {
    position:relative;
    width:<?php echo $width['value']+18; echo $width['unit']; ?>;
    height:<?php echo $height['value']; echo $height['unit']; ?>;
    overflow:hidden;
}

---

Bei der Menübreite ist es auch wichtig, dass die Breite inkl. 5x die Rahmenbreite eingegeben wird.

Bsp.: Das Menü soll insgesamt 500px breit sein, die Rahmenbreite rechts z.B. 2px, d.h. das eigentliche Menü ist nur 490px breit + 5x 2px = 500px.


Auf meiner Testseite schaut das Menü nun ok aus, egal, welche (passenden) Werte ich im Backend einstelle... ;-)

Danke für diese Lösung.
Aber siehst du jetzt, was ich im vorherigen Beitrag gemeint habe? Das letzte Bild flattert, also variiert in der Breite.
Deswegen weiß ich nicht, ob ich das umsetzen soll. Oder soll ich beides anbieten? (Checkbox-Auswahl in den Einstellungen)

Also bei mir flattert nichts.

Getestet im IE 9, Safari 5.05 und Firefox 5.0 unter Windows 7

Wann soll denn dieses Flattern kommen?

:: IE9, Opera 11.50 | Windows 7 ::

Dein Mauszeiger ist auf dem (beispielsweise) viertem Bild. Während deine Augen auf die Endkante des letzten Bildes gerichtet sind, bewegst du die Maus über die anderen Bilder. Siehst du es jetzt?

Hallo.

Bei mir gib es nicht als ich im Modul die ID definiert habe diese wurde nicht übernommen & angezeigt.
Musste selber im TPL ein div mit Id einfügen.
Wieso ist das so? :)

PS: Ah jetzt habe ich es beim Artikel eingefügt beim einbetten des Modules ;)

Also so schön wie her slidet es bei mir nicht :)
http://netweblogic.com/demos/phatfusion/imagemenu/

lg Matthias

Als du dem Modul "Navigationsmenü" die CSS-ID vergeben wolltest, hat er das nicht gespeichert? Das wäre dann ja eher ein Problem mit Contao als mit dieser Erweiterung.

Denke eher das in deiner TPL was fehlt :)
Aber nicht so wild wenn man über Atrikel das Modul einbindet und dort die ID verbiegt klappt es.
Ist bei dir das Menü auch so hacklig? Also bei dem einen Beispiel bewegt es sich so smooth. :)
Und wenn mann z.b. auf dem Menü de Maus hin und her bewegt bleiben die einzelen Menüpunkte geschlossen
ich muss immer raus fahren ins weiße und auf den Menüpunkt den ich möchte dann öffnet er sich.
Wenn ich dann wider zum 2 Punkt "fahre" bleibt der erst offen.

Liebe Grüße
Matthias

Eigentlich wird die Klasse im 'mod_navigation.tpl' vergeben. Das hat dann nichts mit meinem modifiziertem Template zu tun.
Zum Zweiten: ich glaube, das ist das gleiche Problem wie bei Rundinhio. Schau dir mal die Posts #17 und #19 an.

Hallo Richard,


ja, habe ich jetzt auch gesehen. Es entsteht immer ein Versatz des 5. Bildes, wenn ich z.B. auf das 4. Bild weitergehe... :o

Ich hab jetzt mal verschiedene Sachen ausprobiert, komme aber zu keiner Lösung. Leider!!

Genau aus diesem Grund werden m.E. immer "unbemerkt" 5-20px abgeschnitten.

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.

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

Hallo, planb,

Willkommen in der Contao-Community!

Ich glaube der Fehler ist schnell zu beheben: In das Feld "Seitenalias" (neben dem Pfad zum Bild) sollte wirklich der Seitenalias stehen, welche in der Seitenstruktur steht. (Bestimmt hast du keinen Alias eingegeben, der wird nämlich oft generiert. Ich glaube du musst einfach nur alles klein schreiben.)
Was dahinter steckt: Der Seitenalias wird als CSS-Klasse im 'nav_imagemenu' vergeben (<a class="alias" />). Dieser Alias wird dann auch in der generierten CSS-Datei verwendet. Und wenn die beiden nicht übereinstimmen...

Der Fallback: Bitte nur einmal setzen, denn diese Seite wird als aktiv gesetzt, wenn man sich auf einer Seite befindet, die weder eine Unterseite ist, noch sich im Menü befindet.

planb willkommen in der Contao-Community.

Ich musste auch ein bisschen üben, nun klappt es.

Hier zur Contao (2.10) ImageMenu Demo von mir.

Ich würde gelegentlich noch einen wiki Eintrag, machen wenn ich denn unmittelbar unter der Demo einbinden könnte.
Ausser einen iframe kommt mir nichts in den Sinn. Hat jemand eine alternative Idee ?
(2x das selbe dokumentieren macht kein Spass ;))

ciaobello

p.s.
Mir ist noch ein Bug aufgefallen. Wenn ich auf das "Bilder durchsuchen" Icon klicke nachdem ich einen Eintrag in "Objekte (Hintergrundbilder)" kopiert habe (+ die reihe duplizieren) muss ich zuerst mal auf speichern gehen ... ansonsten ändert es mir den Eintrag des letzten Objekts vor dem kopieren und nicht den duplizierten Eintrag. Vielleicht ist das ja gar kein Bug sondern nur eine Option ;-)

Hallo, ciaobello,

Danke für den Beitrag! Aber unter Contao 2.10 ist das Script für MooTools 1.3 kompatibel :D (https://github.com/samuelbirch/ImageMenu/pull/1)

Zum Bug: Einmal ist mir das auch aufgefallen, aber dann konnte ich das nicht mehr rekonstruieren.

Falls es nur um das erwähnen der Kompatibilität ging, hab ich das auf der Webseite angepasst.
Eigentlich hätte jeder der das Script installieren will, über den Link ins ER, nachlesen können mit was das Skript kompatibel ist :rolleyes:.

Es ging ja schon nur um das oder ?

Ciaobello

Bug hin oder her ... danke für Deine Arbeit mit der Erweiterung ;).

Hallo & vielen Dank für die warmen Willkommensgrüße.

Nachdem ich jeweils den richtigen Seitenalias und den Fallback nur einmal angehakt hatte, wurde es besser, jedoch nicht einwandfrei.
Neidisch machte mich die Seite von ciaobello. ;)
Das habe ich zum Anlass genommen, auch Contao 2.10 zu installieren. Und siehe da: Es sieht SUPER aus.

Vielen Dank. Ein wirklich tolles Menü!

Liebe Grüße aus Bonn,

der Christian

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

.. um jetzt nicht extra einen neuen Beitrag zu eröffnen, frage ich direkt hier mal nach.
Ich habe, um das ImageMenu zu testen, ein ältere ContaoVersion (2.93) auf einem Webserver installiert und anschliessend ImageMenue als Extension installiert.
Danach habe ich die bei der Extensions angegebenen Anpassungen und Einstellungen vorgenommen.
Das ImageMenu habe ich zwecks Test in die MusiAcademy Vorlage einfügen wollen; dafür habe ich bei den Einstellungen Bilder dieses Themes als MenuBilder angegeben.
Interessanter Weise werden die Bilder nicht angezeigt. Das Menue, bzw entsprechender Effekt wird erkennbar durch die sich bewegenden Grenzen, die Menupunkte sind jedoch auswählbar und funktionieren. Nur die Bilder werden nicht angezeigt.

Vielleicht kann mir ja hier jemand weiterhelfen ..

Hallo,

ich denke die Bilder werden falsch angezeigt, da du den Seitenalias in die Spalte "Seitenalias (bzw. CSS-Klasse)" falsch eingegeben hast.

Vergl.: Anhang 5717

Danke, daran hat es gelegen.

Tolle Sache das Image Menu.

Funktioniert mit Contao 2.10.4 auch einwandfrei - bis (zumindest bei mir) auf einen kleinen Schönheitsfehler:
Wenn man einen Rahmen definiert wird er rechts und unten nicht angezeigt (abgeschnitten?).
Auch dann, wenn ich z.B. nur dem ganz rechten Bild (über css) einen Rahmen zuweise.

http://dev.hexe-iruna.de


Viele Grüße, Kurt

Endlich mal wieder eine Erfolgsgeschichte!

Und wenn du in den Einstellungen statt 'white' 'ffffff' schreibst?

. . . es schein so als wenn das Fenster zur Anzeige der Bilder zu klein wäre, bzw nicht entsprechend angepasst wird.
Die Höhe habe ich auf 300px eingestellt (Bildhöhe), die angezeigten Bilder sind aber etwa 4px weniger hoch.

Zum Test habe ich allen Bildern per css manuell einen Rahmen zugwiesen
(oben und unten 2px, rechts und links 1px, für das rechte Bild rechts 2px und für das linke Bild links 2px)
Dies hat zur Folge, daß das rechte Feld schmäler geworden ist.
Die anderen (schmalen) Felder sind etwa 100px breit, das rechte nur noch 75px.


Viele Grüße, Kurt

Ich würde sagen, du stellst in den Einstellungen Rahmen rechts 2px ein und definierst per CSS zusätzlich #imagemenu { border:2px solid #fff; }, wenn das Ganze noch einmal umrandet werden soll.

Dass das rechte Bild abgeschnitten wird ist "klar".

Hallo Richard,

ich habe die Rahmen jetzt direkt im Bild eingebaut - und weil das rechte Bild trotzdem abgeschnitten wird - die rechte Linie mit #imageMenu ergänzt.
Das Ganze hat wunderbar funktioniert - bis ich die Lightbox installiert habe.
Ich habe jetzt zwar die Lightbox wieder deinstalliert, der Slideeffekt im Menü geht aber trotzdem nicht mehr.
Auch eine neue Installation von ImageMenu hat nicht geholfen.

Woran kann das liegen?

##edit
Es sieht so aus, als wenn unbedingt HTML5 notwendig ist.



Viele Grüße, Kurt

Hallo,
ich finde das sliden toll und würde gerne das Menü fast Seitenfüllend einsetzen.
Auf Klick soll dann auf die Unterseite weitergeführt werden.
Ginge das?

Gruss dtptiger

Hallo,

das ImageMenu basiert auf dem Navigationsmodul und nimmt auch diese gelieferten Daten zum Erstellen des Menüs.
Von daher müsstest du mit dem Start- und Stoplevel rumexperimentieren. Aber nie mehr als eine Ebene für das Menü verwenden!

Hallo,
wie könnte ich das imagemenü, so wie die anderen menuemodule, ein zweitesmal mit anderen Bildern und etwas anderen Abmessungen einsetzen?
Die anderen menuemodule werden in den Modulen angezeigt, könnte deine Modul da auch angezeigt werden, dann ginge das doch auch.
Oder?
Oder könnte ich das etwas im PHP code machen, den ich ja nicht so ganz verstehe, gerade in Verbindung mit dem integrierten javascript.

Fragt dtptiger

Hallo,

erst einmal vielen Dank für die tolle Erweiterung!
Funktioniert auch super!

Aber ich habe ein Problem:

Ich brauche auf einer Webseite nicht nur ein imageMenu, sondern gleich mehrere. Wie kann ich das machen, denn sobald ich in den Einstellungen mehr als drei Bilder (so viele sollten es pro imageMenu sein) zuweise übernehmen alle imageMenu diese Bilder. Es werden also in jedem verwendeten imageMenu alle Bilder aus den Einstellungen angezeigt. Ich will aber pro imageMenu nur drei Bilder.

Kann man auf einer Webseite verschiedene imageMenus verwenden? Wenn ja, wie?

Danke!

An sich ist das nicht möglich, das würde eine große Umstellung in der Programmierung bedeuten.
Ich muss mal sehen, ob ich aktuell Zeit dafür übrig habe.

Das wäre wirklich super! Ich habe nämlich nun ein riesen Problem, da ich damit gerechnet habe, dass es funktioniert und die Webseite dementsprechend geplant habe. ;(

Danke dir!

Ich habe dieses Menü auf meiner Seite am Laufen, es sieht einfach super aus. Was mich noch stört, ist folgendes:

Ich erkläre es am Beispiel (ist auf meiner Seite genauso)

Gehe ich mit der Maus auf "Abstract" und anschließend nach links auf "Urban" verschieben sich die 3 links liegenden Menübilder um 1 bis 2 Pixel.

Hat jemand eine Idee, woran dies liegen kann?

Ich glaub ich bin zu blöd.
Habe 4 navipunkte. Die "ausgklappten" Punkte sollen 420px breit sein. zugeklappt ist jeder Punkt 70px breit. Aber egal was ich im Backend einstelle (2.10.4) so schaffe ich es nicht, dass der aktive Punkt offen und die anderen 3 geschlossen daneben stehen. Kann mir da irgendeiner auf die Sprünge helfen? Der Link der ROH Seite ist: http://www.outdoorparc.com

Danke Euch

Das Problem von macbee ist gelöst, Seiten, die im Menü nicht angezeigt werden sollten, waren nicht versteckt (Im Menü verstecken).

Ich hatte bei den Einstellungen kleine Ursachen und große Wirkungen gehabt. Falls noch jemand die Probleme hat, so hoffe ich, ist das eine Hilfe.

Unter Einstellungen,

den Bildnamen mit Trenn,- bzw. Unterstrichen angegeben: Bild wird nicht angezeigt
beim Seitenalias .html angegeben: Nix wird angezeigt
einen Rahmen unten eingefügt und keinen rechts: kein Bewegungseffekt angezeigt

Wenn ich schon keine Zeit sparen konnte, vielleicht jetzt ein anderer...:(

Hallo,

ich habe 3 Bilder jeweils mit 250px breite und mein ImageSlieder funktioniert einwandfrei!!!

Allerdings möchte ich in allen 3 Bildern auch jeweils 3-5 Untermenüpunkte hinzufügen. Quasi wenn man mit maus übers Bild geht, sollen sich das Bild groß öffnen und dann sollen die eigene Menüpunkte zu den jeweiligen Artikel bzw. Bilder zu sehen und verlinkt sein.

Geht das? :cool:

Danke im Voraus

Emo

Zitat:

---

Zitat von emreisik

ich habe 3 Bilder jeweils mit 250px breite und mein ImageSlieder funktioniert einwandfrei!!!
Emo

---

Natürlich ImageMenu :)

Keine Antwort? kann niemand mir helfen?

Grüße

So wie ich das in Erinnerung hab ist das Imagemenu für Level1 Menu gedacht ... also keine untermenus.

Hallo,

ich habe jetzt schon einige Zeit herumprobiert und gelesen und wieder probiert - ich hoffe, jemand kann mir weiterhelfen...

Ich habe die Version 2.11.2 installiert, die Erweiterung imageMenu heruntergeladen, alles bei „Einstellungen“ eingegeben (Pfad, Seitenalias), so wie es beschrieben ist. Der Stoplevel ist auf 0, Hard Limit. Die Breite der Links #imageMenu ul li a auf width:36px; gesetzt. Das Menü erscheint auf der Website, doch beim Rollover geht das jeweilige Bild auf, nur die anderen Menüpunkte verschwinden dann gleichzeitig. Und wenn ich den Haken bei "Menü offen lassen, wenn aktiv" setze, ist das jeweilige Bild offen, aber die anderen Menüpunkte verschwinden ganz und es ist kein Menu mehr da, nur noch das "aktive" Bild. Eigentlich müssten sich die Bilder doch seitlich verschieben und weiterhin zu sehen sein.

Hat jemand einen Tipp?

Vielen Dank
Gruß
bintang

Zitat:

---

Zitat von bintang

Die Breite der Links #imageMenu ul li a auf width:36px; gesetzt. Das Menü erscheint auf der Website, doch beim Rollover geht das jeweilige Bild auf, nur die anderen Menüpunkte verschwinden dann gleichzeitig. Und wenn ich den Haken bei "Menü offen lassen, wenn aktiv" setze, ist das jeweilige Bild offen, aber die anderen Menüpunkte verschwinden ganz und es ist kein Menu mehr da, nur noch das "aktive" Bild. Eigentlich müssten sich die Bilder doch seitlich verschieben und weiterhin zu sehen sein.

---

Fehler war, dass zusätzlich per CSS eine Breite von #imageMenu ul li a definiert wurde. Die Breite des geschlossenen Punktes wird automatisch generiert und sollte nicht manuell beeinflusst werden.

Hallo,

ich habe soeben versucht das imagemenu in Conto 3 zu verwenden,
was von keinem Erfolg gekrönt war.

Deswegen meine Frage, ob geplant ist dieses nette Menü auch mit Contao 3 zum laufen zu bringen.

Gruss
dtptiger

Hey,
ich habe das ImageMenu einmal komplett neu für Contao 3 geschrieben.
Ihr werdet sehen, die Einstellungen werden im Modul vorgenommen und die Hintergrundbilder könnt ihr in der Seitenstruktur festlegen.
Die ersten können gerne schon mal testen.
GitHub: https://github.com/richardhj/contao_imagemenu

hi
ich habe gerade das imagemenu auf meiner seite instaliert weil ich ich es für ein projekt nutzen wollte, finde das design un die animation super
krieg es aber einfach nicht zum laufen
man sieht zwar die bilder/navigation aber es findet keine animation statt
hier mal das html ->

HTML-Code:

---

<!DOCTYPE html>
<html lang="de">
<head>

  <meta charset="utf-8">
  <title></title>
  <base href="http://harryhummel.de/contao/">

  <meta name="robots" content="index,follow">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="generator" content="Contao Open Source CMS">

  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <style>#wrapper{width:1000px;margin:0 auto}#header{height:200px}#left{width:250px;right:250px}#container{padding-left:250px}</style>
  <link rel="stylesheet" href="system/modules/imagemenu/assets/ImageMenu-5.css">
<link rel="stylesheet" href="assets/css/44579e60971f.css">
    <script src="assets/js/9f90846a9e62.js"></script>
  <!--[if lt IE 9]><script src="assets/html5shiv/3.6.2/html5shiv.js"></script><![endif]-->

</head>
<body id="top" class="win firefox gecko fx24">

  <div id="wrapper">

   
   
    <div id="container">
      <div id="main">
        <div class="inside">
         
<div class="mod_article block" id="praxis">

 
 
 
</div>

<!-- indexer::stop -->
<nav class="mod_imagemenu block" id="imagemenu">

 
  <a href="#skipNavigation5" class="invisible">Navigation überspringen</a>

 
<ul class="level_1">
<li class="first"><a href="index.php/stefanieboerner.html" title="Stefanie Börner" class="stefanieboerner first">Stefanie Börner</a></li>
<li><a href="index.php/susannevoerg.html" title="Susanne Vörg" class="susannevoerg">Susanne Vörg</a></li>
<li><a href="index.php/sandradingeldein.html" title="Sandra Dingeldein" class="sandradingeldein">Sandra Dingeldein</a></li>
<li class="last"><a href="index.php/susannekarl.html" title="Susanne Karl" class="susannekarl last">Susanne Karl</a></li>
</ul>

  <a id="skipNavigation5" class="invisible">&nbsp;</a>

</nav>
<!-- indexer::continue -->
        </div>
              </div>

              <aside id="left">
          <div class="inside">
           
<!-- indexer::stop -->
<nav class="mod_navigation block">

 
  <a href="#skipNavigation1" class="invisible">Navigation überspringen</a>

 
<ul class="level_1">
            <li class="active first"><span class="active first">Praxis</span></li>
                <li class="sibling"><a href="index.php/aerzte.html" title="Ärzte" class="sibling">Ärzte</a></li>
                <li class="sibling"><a href="index.php/mitarbeiter.html" title="Mitarbeiter" class="sibling">Mitarbeiter</a></li>
                <li class="sibling"><a href="index.php/leistungen.html" title="Leistungen" class="sibling">Leistungen</a></li>
                <li class="sibling last"><a href="index.php/zeiten.html" title="Zeiten" class="sibling last">Zeiten</a></li>
      </ul>

  <a id="skipNavigation1" class="invisible">&nbsp;</a>

</nav>
<!-- indexer::continue -->
          </div>
        </aside>
     
          </div>

   
   
  </div>

 
      <script>
              setTimeout(function(){(new Request({url:"system/cron/cron.txt",onComplete:function(e){e||(e=0),parseInt(e)<Math.round(+(new Date)/1e3)-86400&&(new Request({url:"system/cron/cron.php"})).get()}})).get()},5e3)
          </script>
 
</body>
</html>

---

hatte es bei der contao 2.11 version problemlos hinbekommen aber hier(3.1.1) wills einfach nicht laufen
kann mir jemand eine hilfe stellung geben?

grüsse
ed

Hi ed,

herzlich willkommen
vermutlich liegt es an den geänderten Zugriffrechten..
im unterverzeichnis assets muss für die aktuelle contao version die .htacess geändert werden...

Code:

---

<IfModule !mod_authz_core.c>
  Order allow,deny
  Allow from all
</IfModule>
<IfModule mod_authz_core.c>
  Require all granted
</IfModule>

---

danke magicsepp,
für den schnellen vorschlag,
hab das soeben versucht aber leider ohne veränderung
hast du vielleicht noch eine idee?


grüsse
ed

Ich denke das hat nichts mit dem ImageMenu zu tun und der Thread sollte in ein anderes Forum verschoben werden.

Deine Bilder können nicht aufgerufen werden. http://harryhummel.de/contao/files/aufbau/face1_1.jpg - da kommt sedoparking, googlesyndication, doubleclick und son Zeugs.

ps
Lass die Installation besser auf ner Subdomain laufen, die du in den Installationsordner leitest. http://de.contaowiki.org/Domainweite.../_Domainaliase
Dann hast du z.B.
BE - http://contao.harryhummel.de/contao/
FE - http://contao.harryhummel.de/

Aktiviere die .htaccess.default (umbenennen nach .htaccess) und hake in den Einstellungen "URLs umschreiben" an, damit das index.php im Link verschwindet.

Ach so, und bitte poste keine kompletten HTML-Seiten als Code. Gib einen Link zu der Seite, dann können wir uns den Code live ansehen.