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:
"active" kennzeichnet übrigens den gerade angeklickten Menüpunkt. In der CSS-Datei kann man nun also direkt entsprechende Grafiken/Icons zuweisen:
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: