Einleitung
An anderer Stelle hatte ich die Realisierung und Einbindung eines mod_mainmenu's beschrieben als vertikales Menü mit aufklappbaren Untermenüs. Hier möchte ich eine sehr bekannte und beliebte weitere Möglichkeit für eine Menü erläutern, welches im Allgemeinen bekannt ist als Suckerfish oder Son Of Suckerfish. Mit etwas Google'n wird man dazu im Internet verschiedenen Seiten finden, die die Problematike dieses Menütyps umfassend darstellen u.a. zu den Styles, die z.T. notw. Scripte für die fehlende Unterstützung der hover-Funktion durch den IE und die Möglichkeiten der zusätzlichen Aufpeppung durch z.B. mootools.
Gegenstand dieses Artikels soll sein, wie das Suckerfish-Menü unter Joomla eingebunden werden kann unter Verwendung der mittlerweile sehr guten Struktur des XHTML-valieden mod_mainmenu's. Zusammen mit meinem für die vertikale Verwendung beschriebenen Menüs lassen sich dann also beide Menütypen ohne großen Aufwand über das Joomla-Standard-Menü mod_mainmenu einbinden.
Was sind die Charakteristika eine Suckerfish-Menüs?
- Die erste Menüebene wird horizontal angelegt, i.d.R. in der gesamten Breite des Contentbereiches.
- Nur die erste Menüebene ist permanent zu sehen.
- Die zweite Menüebenen wird jeweil unter Ihrem Parent-Menüeintrag beim Mouseover über ihrem Parent-Menüeintrag eingeblendet.
- Alles weiteren Menüebenen werden rechts neben ihrem Parent-Menüeintrag eingeblende.
- Gern wird dabei ab der 2. Menüebene ein transparenter Hintergrund verwendet, so dass die aufklappenden Menüeinträge den überlagernden Content nicht vollständig abdecken.
- Ein Klick auf einen Menüeintrag ruft die entspr. verlinkte Seite auf.
- Beim Verlassen der Maus aus den Menüeinträgen werden dieses wieder unsichtbar.
- Schließlich werden noch gern z.B. die MooTools eingesetzt, um das Einblenden und Ausblenden der Menülisten peppiger zu gestalten - entweder durch Fading oder Sliding oder wie auch immer.
Was wird benötigt für das Menü:
- Das schöne an dem Menü ist, dass es eigentlich ganz ohne JavaScript auskommen würde. Allein durch die hover-Funktion, wie Sie von den meisten Browsern unterstützt wird, kann die gewünscht Funktion erreicht werden. Deshalb bräuchten wir eigentlich lediglich eine Stylesheet-Datei, die a) zum einen die Layout-Informationen für die Listen liefert und zum anderen b) die Design-Formatierungen für den Style der Menülisten und Listeneinträge.
- Eigentlich schon ur noptional werden ein paar wenige Grafiken benötigt. Das aber eben nur um alles etwas zu verschönern oder, und das wäre eigentlich wichtiger, um Eigenschaften eines Menüeintrages zu visualisieren, wie z.B. ob ein Element eine Untermenü besitzt (is parent oder auch has childs), welcher Menüeintrage gerade der Aktuelle ist (benannt i.d.R. mit id=current) oder schließlich welche Menüelement gerade active sind (alle die die auf dem Weg zum aktuellen Menüelement, einschließlich des akutellen Menüelementes liegen - also quasi aufgeklappt sind). Im Gegensatz zum vertikalen Menü-Tree sind aber diese eigentlichen sinnvollen Menüelementeeigenschaften beim Suckerfish-Menü nicht so maßgeblich, weil das Menü weniger zur Orientierung geeignet ist, eben weil ja die Submenü-Einträge immer nur bei Mouseover sichtbar sind.
- Schließlich brauchen wir noch ein Script, welches notwendig ist die im IE fehlende Mouse-Over-Funktion (das hover'n) zu erreichen. Leider wurde es von Microsoft auch in der Siebener-Version wieder nicht umgesetzt, weshalb wir wohl noch eine Weile mit solchen IE-Extras leben müssen.
Die CSS-Datei im Detail
Also das Herzstück des Suckerfish-Menü ist ja eben diese CSS-Datei. Hier eine Datei wie Sie beispielsweise aufgebaut werden kann. Das hier abgebildete Beispeil ist weitgehend aus dem Joomla-Standard-Template JA-Purity, in dem ein Suckerfish-Menü bereits eingebunden ist. Allerdings wurden von mir noch die einen oder anderen Anpassungen vorgenommen, weil in der CSS-Datei noch nicht alle Classen sauber auf die mod_mainmenü-Classen abgestellt wurden. Auch ich habe das nur so weit vorangetrieben wie es für meine Design-Bedürfnisse wünschenswert war. Es sind schon noch ein paar Rudimente verblieben (z.B. die Verwendung von li.sfhover, li.havesubchildsfhover oder li.havesubchild-activesfhover, die so von mod_mainmenu gar nicht aufgerufen werden).
Son-of-Suckerfish-menu.css | |
1 |
/* Son of Suckerfish Dropdowns |
Das Spezial-Script für den IE
Hier nun die paar Scriptzeilen, die die Hoverfunktion für den IE-Erzeugen. Auch dieses wurde vom JA-Purity-Template übernommen.
son-of-sucherfish-menu.js | |
1 |
sfHover = function() { |
In diesem Script ist evtl. eine Anpassung notwendig, fall Sie den DIV-Bezeichner für den Menü-Container anders verwenden wollen als hier vorgegeben. Dazu dann also inder Zeil2 "ja-mainnav" ändern in Ihre DIV-Class-Bezeichnung.
Aufruf des Menü im Template und die mod_mainmenü-Konfiguration.
Hier nun die Hinweise, wie das Menü im Template eingebunden ist. Wer JYAML benutzt findet seine Template-Datei im Verzeichnis joomlarootpfad/templates/hm_yaml/html/index/meinDESIGN/ als index.php, index_fullheight.php oder z.B. index_gfxborder.php (welche Datei verwendet wird läßt sich in der JYAML-Komponente unter meinDESIGN "Bearbeite Design-Konfiguration" im Bereich Layout entscheiden. Da jedes Template anders aussieht, einschließlich Ihrer Eigenbauten ist nun eine Position schwer vorzugeben. Sie brauchen i.d.R. für das Suckerfish-Menü eine Modulposition, die über die ganze Inhaltsbreite geht. So wäre es also z.B. möglich unter den Header zu integrieren oder eine eigene Modulposition zu erstellen.
So sieht dieser Template-Bereich bei mir aus:
Template: index.php | |
80 |
if($this->countModules( 'nav_main' )) : ?>
|
Einbindung der notwendigen Dateien in das Template
Bei dieser Beschreibung werde ich der Einfachheit halber mich auf die eleganten Möglichkeiten der Template-Engine hm_yaml (JYAML - eine excellente, sehr stabile Joomla-Adaption des YAML-Template-Framework von HieblMedia). Im Detail möchte ich aber nicht das Template beschreiben, setzte also einfach voraus, dass sich der Interessiert mit der Template-Komponente JYAML beschäftigt hat. Bei denen die ein eigenes Template entwickelt haben oder ein bestehendes Template nur mit diesem Suckerfish-Menü modifizieren wollen, möchte ich ebenfalls die notw. Kenntnis voraussetzen.
Bevor Sie die Datei in Ihr YAML-Design einbinden können, müssen diese auf den Server geschoben werden. Am besten per ftp-Client. Ich nutze dafür der JYAML-Strukturlogik gehorchend folgende Verzeichnisse:
- für die CSS-Datei den Pfad: joomlarootpfad/templates/hm_yaml/css/meinDESIGN/navigation/
- für die Script-Datei den Pfad: joomlarootpfad/templates/hm_yaml/scripts/meinDESIGN/
- für die Grafiken z.B: den Pfad: joomlarootpfad/templates/hm_yaml/images/meinDESIGN/navigation/sos/
Wichtig ist also die CSS-Datei und die Script-Datei in den Header des Templates einzubinden. Im JYAML erfolgt das über die JYAML-Komponente (ich erstelle mir i.d.R. durch Kopie des default-Designs ein eigenes YAML-Design, in der ich dann sehr gut reversibel experimentieren kann) in dem Bereich für das eigene Design (meinDESIGN) über den Link "Bearbeite Design-Konfiguration". In dem dann erscheinenden Dialog gibt es a) einen Bereich StyleSheets mit einem Link "Style-Sheet hinzufügen" und b) einen Bereich Scripts ebenfalls mit einem solchen Link zum Hinzufügen der einzubindenden Scripte. Mehr muss hier nicht gemacht werden.
Natürlich ist wichtig, dass Sie die CSS-Datei dahingehend anpassen, dass alle background url()-Pfadangaben korrekt auf den Pfad zeigen der von der StyleSheet-Datei aus auf die einzubindenden Grafiken verweist. z.B. url(../../../images/meinDESIGN/navigation/sos/grafik.gif).