...oder „Wie mache ich aus einem Suckerfish
Menü ein cooles Mootools-Menü für Joomla“
Gefällt Ihnen die Navigation auf
unserer Seite? Bis vor kurzem nutzten wir dafür die frei
verfügbare Komponente swMenuFree. Die konnte zwar mit einiger
Mühe hübsche Menüs generieren, von Suchmaschinen
freundlichen URLs, Barrierefreiheit und W3C Standard hatte sie
allerdings keinen Schimmer. Die Zeit war also reif einige der vielen,
inzwischen verfügbaren Lösungen zusammen zu würfeln,
und ein flexibles und visuell ansprechendes Menü für unsere
Seite zu erstellen.
Dabei ist die eingesetzte Technik
relativ primitiv und für jeden, der Interesse hat, ein ähnliches
Menü zu nutzen, leicht umzusetzen. Das hier vorgestellte ist
zwar ein vertikales Menü, ein horizontales ist jedoch mit
wenigen Handgriffen ebenfalls möglich.
Bemerkung
Inzwischen haben wir unsere Seite relauncht und aus dem vertikalen ein horizontales Menü gebaut. Im vierten Teil des Tutorials für ein horizontales Suckerfish Menü finden Sie alle nötigen Handgriffe, um das hier besprochene vertikale Menü flach zu legen.
JSM soll Joomla!-Suckerfish-Mootools
heißen, und dieses mehrteilige Tutorial wird Ihnen zeigen, wie
sie ohne Programmierung und wenig CSS Kenntnissen ein valides,
Crawler-freundliches, barrierefreies, W3C konformes und nicht zuletzt
cooles Menü erstellen können. So wie man es von
professionellen Joomla! Templates, wie denen von Yootheme oder
Rockettheme kennt.
Was brauchen wir bevor es losgeht?
Zunächst wird eine saubere
Joomla! 1.0.12 Installation mit Beispiel-Content benötigt. Wenn
Sie das erledigt haben, sollte ihr Frontend in etwa, nein - genau so
aussehen:
Wichtig
ist, dass sie das standardmäßig aktivierte Template
rhuk_solarflare_ii
aktiviert lassen. Das ganze Tutorial baut darauf auf, da es sehr
verbreitet und beliebt ist. Die meisten von uns haben es schon einmal
angepasst oder erweitert. Haben Sie erstmal verstanden wie sich das
JSM Menü für dieses Template anpassen lässt, wird es
ein Leichtes es auch für andere Templates anzupassen.
Um ein wirklich cooles Menü zu
bauen, müssen wir uns Gedanken zum Modul machen, welches das
Menü darstellt. In der Regel wird hierfür mod_mainmenu
Modul verwendet - leider. Wir brauchen jedoch ein vernünftiges
Menü System. Was ist mit dem vorhandenem Menüsystem nicht
in Ordnung, fragen Sie sich?
Haben Sie schon einmal probiert, ein
Menü zu erzeugen, welches Untermenüpunkte hat und auf dem
Menü Stil Flat List basiert? Falls ja, werden Sie bemerkt
haben, dass die Untermenüpunkte von Flat List nicht
unterstützt werden. Auch nicht wenn Expand Menu aktiviert
ist. Das Feature fehlt schlichtweg im mod_mainmenu Modul.
Nun gut werden Sie sagen, dann nehmen
wir eben nicht Flat List sondern Vertikal als Menü
Stil, scheint ja auch mit Untermenüpunkten ganz gut zu
funktionieren.
Hallo?! Wir wollen ein cooles und
valides Menü. Vertikal basiert auf einem
Tabellen-Layout, mit dem man alles, nur kein valides Suckerfish-Menü
erstellen kann (außer man hat verdammt viel lange Weile).
Also weg mit dem mod_mainmenu und her
mit mod_exmenu alias „Extended Menu“. Das „weg“ war jetzt
nicht wörtlich gemeint. Sie können (und sollten) es
installiert lassen.
Download Extended Menü
Extended Menü
Das von Daniel Ecer entwickelte Modul
„Extended Menu“ vereint alle Features von mod_mainmenu und stellt
eine gehörige Portion neuer zur Verfügung.
Zu den wichtigsten zählen:
Die große Anzahl an Parametern
mag auch der Grund sein, wieso mancher vom Gebrauch des Moduls
zunächst abgeschreckt ist. Aber keine Sorge - Rettung naht!
Installieren Sie das Extended Menü
über das Joomla Backend. Sobald Sie es installiert haben, taucht
es in der Modulübersicht auf und ist nicht veröffentlicht.
Klicken Sie auf das Modul, um an die Parameter zu gelangen...na los!
Ignorieren Sie am besten was Sie nun
sehen. Das einzige, was uns jetzt interessiert, ist der Punkt Menu
Name. Analog zum mod_mainmenu kann hier ausgewählt werden,
welches Menü von diesem Menü-Modul dargestellt werden soll.
Hier tauchen die üblichen Verdächtigen auf: mainmenu,
othermenu, etc. Standardmäßig, und bei keiner Auswahl,
wird mainmenu ausgewählt. Sie können es also auswählen
oder nicht. Hauptsache sie veröffentlichen jetzt das Modul.
Standardmäßig wird das Modul im Modulslot left
dargestellt, wo es bleiben kann. Das wäre wohl auch der richtige
Zeitpunkt um das alte, auf mod_mainmenu basierende „Main Menu“ zu
deaktivieren. Wenn Sie ein Perfektionist sind, können sie noch
die Modul-Ordnung des neuen Extended Menu nach oben, über das
„Other Menu“ setzen.
Wenn Sie jetzt in das Frontend gehen,
sehen sie eigentlich das Gleiche wie vorher. Vielen Dank dann, ich hoffe es hat Spaß gemacht.
OK, OK... weiter geht's! Wenn Sie
sich den Quelltext der Website anschauen, werden Sie feststellen,
dass das neue, mod_exmenu basierende Menü .... mit Tabellen
ausgegeben wurde! Also schnell in's Backend und bei den
Modulparametern unter Menu Style nach schauen, was es sonst
noch gibt. Standardmäßig ist Vertical ausgewählt,
wohl aus Nostalgie zu den guten, alten mod_mainmenu Zeiten. Damit ist
jetzt Schluss! Wenn Sie auf das Dropdown klicken, werden Sie viele
neue Menü Stile vorfinden.
Das wäre jetzt wohl ein guter
Anlass, sie Amok laufen zu lassen, um alle Stile mal durch zu
spielen. Wenn Sie sich erholt haben fahren wir mit „JSM Menu
Tutorial Teil 2 “ fort.
 |
Zeige/Verstecke Kommentareingabe
