Hallo zusammen,
es gab ja letztens die Frage von Euch, ob es möglich ist, in Joomla! auch grafische Menüs mit Roll-Over-Effekt einzubauen.

Dazu habe ich auf dem Server:
http://ws.akademie.de/~joomla_beispiele/menue-mit-bildern-mit-rollover.html
ein Beispiel zusammengebaut.

Für den Einbau eines grafischen Menüs benötigt man eine System-Erweiterung, wie z.B.
"Joomla Main Menu Images - mod_j15mainmenuimages".
http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,3675/Itemid,35/

**********************

Die einzelnen Schritte wie man vorgeht ein grafisches Menü einzubauen, Infos dazu findet ihr im Beitrag:
http://www.joomla-workshop.de/content/view/474/117/

Der Einbau eines grafischen Menüs ist nicht ganz einfach und lässt sich sicher besser nachvollziehen, wenn man die Einstellungen im Backend mal durchklicken kann und das Ergebnis im Frontend beobachtet.

Für die Zeit nach dem Workshop hab ich Euch eine Kopie vom Beispiel-Server
http://ws.akademie.de/~joomla_beispiele/ gemacht.

-----------------------------------------------

Die zwei Zip-Dateien die ihr zur Installation braucht, findet ihr unter:
http://www.joomla-workshop.de/media/joomla_beispiele_ftp.zip
(Enthält das komplette Joomla!-Verzeichnis, inkl. Templates, Bilder, und AUCH die installierte Menü-Erweiterung "Joomla Main Menu Images - mod_j15mainmenuimages")

http://www.joomla-workshop.de/media/joomla_beispiele_sql.zip
(Enthält die Datenbank-Inhalte - SQL-Datei)

-----------------------------------------------

1. Datei: joomla_beispiele_ftp.zip
http://www.joomla-workshop.de/media/joomla_beispiele_ftp.zip

Enthält das gesamte Joomla!-Verzeichnis, inkl. Templates und Bilder des Beispielservers. Für die lokale Installation müsst ihr das Zip nur in einem Unterverzeichnis eurer Serverumgebung (Xamp/Mamp) entpacken.

WICHTIG: In der Datei "configuration.php" müssen dann noch die Pfade angepasst werden. Infos dazu findet ihr unter:
http://www.joomla-workshop.de/content/view/476/115/

-----------------------------------------------

2. Datei: joomla_beispiele_sql.zip
http://www.joomla-workshop.de/media/joomla_beispiele_sql.zip

Enthält die SQL-Datei mit den Datenbankinhalten. Für die Einrichtung des Joomla!-Beispielservers auf dem lokalen Rechner muss die gezippte SQL-Datei per phpmyadmin in die lokale Datenbank importiert werden.

Wie man das macht, Infos dazu findet ihr unter:
http://www.joomla-workshop.de/media/joomla-site-portieren.pdf

-----------------------------------------------

NOCH EIN PAAR WICHTIGE INFOS:

Bei dem grafischen Menü mit Roll-Over-Effekt (Cindy-Menü)
http://ws.akademie.de/~joomla_beispiele/menue-mit-bildern-mit-rollover.html
habe ich die Bilder für den ON- und OFF-Zustand per CSS eingebunden.

Damit für jeden Menüpunkt des grafischen Menüs ein anderes Bild (On und Off-Zustand) geladen wird, MUSS man für die einzelnen Menüpunkte jeweils eigene CSS-Klassen anlegen.

WICHTIG:
Auch der ON-Zustand eines Menüpunktes (farbiges Cindy-Bild) wird über CSS gesteuert.

Damit der ON- und OFF-Zustand eines Menüpunktes richtig aus der CSS-Datei geladen wird,
MUSS man im Bearbeitungsfenster des Menüeintrags im FELD: MENÜBILD ein transparentes GIF (z.B. spacer.gif) angeben.
Das transparente GIF muss die Größe haben, wie die ON- und OFF-Bilder.

WICHTIG:
Nur wenn man als MENÜBILD ein transparentes GIF einstellt, klappt der ROLL-OVER-EFFEKT.

Für die CSS-Klassen der einzelnen Menüpunkte nutzt man die ItemIDs der Menüeinträge. Diese kann man in der Menü-Verwaltung des Menüs in der letzten Spalte ablesen.

In der CSS-Datei fügt man dann die zuständigen CSS-Klassen für die einzelnen Menüeinträge basierend auf den ItemIDs hinzu. Für das "Cindy-Menü" mit Roll-Over-Effekt habe ich in der template.css die folgenden Klassen eingetragen:

/* *** LISTENPUNKT FORMATE *** */
ul.menu-cindy li {
background : #FFF;
padding-left : 0;
padding-right : 0;
float : left;
margin : 0;
line-height : 23px;
display: block;
}

ul.menu-cindy li.item125 {
background: url(../images/cindy01_off.jpg);
padding-left : 0;
padding-right : 0;
float : left;
margin : 0;
line-height : 23px;
display: block;
}

ul.menu-cindy li.active_item125,
ul.menu-cindy li.item125 a:hover {
background: url(../images/cindy01_on.jpg);
padding-left : 0;
padding-right : 0;
float : left;
margin : 0;
line-height : 23px;
display: block;
}

ul.menu-cindy li.item126 {
background: url(../images/cindy02_off.jpg);
padding-left : 0;
padding-right : 0;
float : left;
margin : 0;
line-height : 23px;
display: block;
}

ul.menu-cindy li.active_item126,
ul.menu-cindy li.item126 a:hover {
background: url(../images/cindy02_on.jpg);
padding-left : 0;
padding-right : 0;
float : left;
margin : 0;
line-height : 23px;
display: block;
}


ul.menu-cindy li.item127 {
background: url(../images/cindy03_off.jpg);
padding-left : 0;
padding-right : 0;
float : left;
margin : 0;
line-height : 23px;
display: block;
}

ul.menu-cindy li.active_item127,
ul.menu-cindy li.item127 a:hover {
background: url(../images/cindy03_on.jpg);
padding-left : 0;
padding-right : 0;
float : left;
margin : 0;
line-height : 23px;
}

-----------------------------------------------

Das wäre dann wohl alles was ihr braucht. Na denn viel Spaß mit Cindy und den grafischen Menüs ;-)

Lieben Gruß
Kerstin