Joomla Mootools Suckerfish Tutorial - Teil 1

...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:

Standard Template

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:

  • patTemplate Unterstützung

  • Plugin Unterstützung

  • CSS Design

  • und eine Menge an Parametern

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.

feed3 Kommentare
roman
Mai 22, 2009
Stimmen: +0

Warum Joomla 1.0.x
Bei uns wird immer noch Joomla 1.0.12 gepflegt. Ich habe keinen freien Tool gefunden, der mehrere Menüs unterstützt(Main und Sub(mit SubSub) auf einer Seite)

report abuse
vote down
vote up
Ingo
August 16, 2010
Stimmen: +1

Hallo,

bin heute über euer Tutorioal gestolpert und muss mich schon wundern. Warum noch immer Joomla 1.0 und nicht J 1.5?

report abuse
vote down
vote up
Heiko
Juli 22, 2011
Stimmen: +0

Also ich benutze dieses Tutorial auch für Joomla! 1.5 (das waren meine ersten Gehversuche) erfolgreich.

Heute habe ich es in Joomla! 1.6 ausprobiert.
Die einzige "Schwierigkeit" war es eine Joomla! 1.6-fähige Version von Extended Menu zu bekommen^^

Klasse Tutorial!! Vielen Dank dafür!

report abuse
vote down
vote up

Kommentar schreiben
 
  kleiner | groesser
 

security image
Bitte den folgenden Code eintragen


busy
 

B01 realisiert zeitgenössische Online-Kommunikationsmittel.
Wir sind spezialisiert auf OSCMS und unterstützen unsere Kunden vom Konzept bis zum Launch mit Erfahrung und exklusiven Komponenten zur Umsetzung von Communitys, Shops, Portalen und Webseiten.

B01 Kunden

Unsere Ideen, unsere Produkte, unsere Kunden.

B01 empfiehlt:

ZOO Content Construktion Kit

ZOO CCK

Virtuemart Shopsystem

E-Commerce

Joomla SEO

SEO

Joomla Content Editor

Content Editor

Joomla Social Networking

JomSocial