Share this
Twitter
Myspace
Mister Wong
Webnews
Icio
Oneview
Yigg
Newsider
Seekxl
Newskick
FAV!T
Kledy
BoniTrust
Power-Oldie
Bookmarks.cc
Linksilo
Readster
Linkarena
Simpy
Folkd
Googlize this
Wikio
Print
E-mail
Tags
Es gibt verschiedene Ansätze hierzu. Der einfachste ist mit den vorhandenen Mitteln zu arbeiten. So sind die grafischen Menüs auf dieser Site entstanden:
Bordmittel
Dazu zunächst die Menügrafiken in das Verzeichnis images/stories laden.
Danach einen neuen Menüpunkt anlegen und auswählen, was wie verlinkt werden soll. Anschließend rechts unter "Systemparameter" bei den "Menüicons" das Icon auswählen.
Damit das Icon nun aber wirklich angezeigt wird, müssen im zugehörigen Modul einige Einstellungen gemacht werden. Also über das Pulldownnenü "Erweiterungen --> Module" gehen und das zugehörige Modulmenü editieren.
Unter "Andere Parameter" gibt es oben die
- Menüicons anzeigen: JA (das ist der wichtigste. Steht hier NEIN, ist es egal, was in den anderen Punkten eingestellt wird)
- Menüicon-Ausrichtung: Links / Rechts (Auf den Menütext bezogen)
- Menüicon statt Link - Wenn nur Grafik und überhaupt kein Text angezeigt werden soll, dann hier JA einstellen.
Der Nachteil ist zweierlei:
- Besteht der Menüpunkt aus Text und Icon, ist das Icon nicht anklickbar
- Gibt es nur ein Icon kann kein Hover-Effekt eingestellt werden
Um aber einen Hover-Effekt dennoch zu nutzen, entweder in der CSS-Datei einen einfachen Rahmen oder Unterstrich vergeben, der sich um das Icon legt oder das Menü muss als "Liste" eingebunden werden. Wenn das gemacht wird, kann jeder einzelne Menüpunkt über die CSS-Datei angesprochen werden und somit mittels Hintergrundgrafiken das Menü individuell gestaltet werden.
Um die zugehörigen Klassen herauszufinden, muss man zunächst in die Menüübersicht gehen. Ganz rechts steht die ItemID zu den einzelnen Menüpunkten. Die CSS-Klasse setzt sich aus dem Wort "item" und der ItemID des Menüpunktes zusammen. Also beispielsweise "item1".
Wenn man den Quelltext anschaut, dann findet man auch diese Klassenangabe wieder. Das sieht dann in etwa so aus im Quelltext:
<ul class="menu">
<li id="current" class="active item1">
<a href="http://www.time4joomla.de/">
<span>time4joomla</span>
</a>
</li>"active" kennzeichnet übrigens den gerade angeklickten Menüpunkt. In der CSS-Datei kann man nun also direkt entsprechende Grafiken/Icons zuweisen:
// Für alle Menüpunkte
ul.menu a:link,
ul.menu a:visited {
background:url(MeineMenüHintergrundGrafik.jpg);
}
ul.menu a:hover{
background:url(MeineMenüHintergrundGrafikWennDieMausÜberDenMenüpunktBewegtWird.jpg);
}
// Für den aktiven Menüpunkt
li#current.active {
background:url(MeineMenüHintergrundGrafikWennDerMenüpunktAktivIst.jpg);
}
// Für einzelne Menüpunkte
ul.menu li.item1 a:link,
ul.menu li.item1 a:visited {
background:url(MeineMenüHintergrundGrafik.jpg);
}
ul.menu li.item1 a:hover{
background:url(MeineMenüHintergrundGrafikWennDieMausÜberDenMenüpunktBewegtWird.jpg);
}
Das "Geheimnis" sitzt also in der Angabe "li.item1". Der ganze Aufbau ist eine Verschachtelung: Zunächst wird nachgeschaut, ob es sich bei dem HTML-Tag "ul" um die Klasse"menu" handelt. Wenn ja, wird überprüft, ob "li" der Klasse "item1" angehört. Wenn auch das mit ja zu beantworten ist, wird dem anschließenden "a:link" die entsprechende Formatierung zugeordnet.
Fertige Module
Neben den Bordmitteln gibt es aber einge fertige Module, die einem die Arbeit abnehmen und teilweise nette Effekte umsetzen. Dazu einfach mal hier stöbern gehen:
Kommentare
Darum macht es für mich kein Sinn itemX im css zu deklarieren. (?)
Wie ich schrieb, setzt sich der Aufruf aus dem Wort "item" und der Menü-ID zusammen. Die Menü-ID wird natürlich nicht bei jedem Neustart von Joomla neu erzeugt, weil unter eben dieser ID die entsprechenden Einstellungen in der Datenbank gespeichert sind.
Axel
Besten DANK für die Antwort!
Bin auf der Suche auf einer Globalen Lösung. Teilweise habe ich es hin bekommen. ;-)
mfg duck
Geh mal zu den "Nützlichen Links" und schau dir die Open Books an, da wird das genau erklärt.
Man muss sich manchmal erst mal etwas mit der Materie beschäftigen, bevor man versteht, um was es geht.
Du bist hier eigentlich im falschen Tutorial. Eben weil das hier exakt beschreibt, wie man die globale Formatierung umgehen kann ;)
Die globale Lösung hängt vom Template und verwendeten Menüstil ab. mit "a.mainlevel" beispielsweise bist du im globalen Bereich oder mit "ul.menu". Wie gesagt: es hängt ein wenig von deinen Einstellungen ab.
Axel
Also vielen Dank für die super Erklärung hierzu- nach studenlangem Suchen ist das hier die erste Seite wo ich es gefunden habe!!!
Unter Module/Andere Parameter steht bei mir jetzt:
Menüicons anzeigen: JA
Menüicon-Ausrichtun g: Links
Menüicon statt Link - JA
ABER: unter "Systemparameter" bei den "Menüicons" kann ich ausschließlich
"Nicht verwenden auswählen"
Was ist da falsch eingestellt ??
(Joomla 1.5.15 GER, PHP 5.2.5)
Danke für Hilfe!
Arne
"/images/stories"?
ich hab das Problem, das zwischen den icons immernoch der Text angezeigt wird, obwohl ich nur icons angeklickt habe. Kann das daran liegen, weil ich horizontal, statt Liste gewählt habe? Kennt jemand das cassrina hover image Modul? Damit geht das auch, hat nur den Nachteil, das bei gedrückten Icon und splitmenüverwendung, das highlighting nicht mehr übergeben wird. Falls du da vielleicht Idee hast? Aber ich Versuch mal ne Lösung mit deinen Ansätzen, vielen dank
Kann das daran liegen, weil ich horizontal, statt Liste gewählt habe?
---------
Das kann sein ;)
Ansonsten bitte beachten, dass das hier kein Supportforum ist - einfach mal die Startseite zu diesem Thema durchlesen ;)
Axel
Ich habe das Problem: wenn ich Menuicons anzeigen lasse, dann habe ich kein span-tag mehr unten sondern img-tag mit dem engegeben Icon:
ul class="menu">
li id="current" class="active item1">
a href="http://www.time4joomla.de/">
span>time4joomla
/a>
/li>
eigentlich brauche ich für jedes item bei active-Zustand ein anderes Icon. Hast Du eine Lösung dafür?
Besten Dank
damian
Weiß eh nicht, wen du mit Alex meinst. Schreib ihm am besten eine eMail. Ist ja kein Forum hier, sondern eine Kommentar-Kompo nente.
Axel
auf der Suche nach der Lösung habe ich mir die Seite nicht genauer angeschaut.
Sorry auch für die Nameverwechselu ng (peinlich).
Alles Gute