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

  1. 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.
  2. 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.
  3. 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
/* Son of Suckerfish Dropdowns
---------------------------------------------------------
Originally developed by Patrick Griffiths and Dan Webb
http://www.htmldog.com/articles/suckerfish/dropdowns/
---------------------------------------------------------
NOTE: After a deep research, we decide to divide this
CSS into 2 parts. The first part will define the layout.
The second part will define the visual look for this menu.
---------------------------------------------------------*/

/* 1. Abschnitt: Hier wird nur das Layout definiert */
#ja-mainnav,
#ja-mainnav ul { padding: 0; margin: 0; line-height: 20px; }
#ja-mainnav a { display: block; line-height: 20px; margin: 0; padding: 10px 20px; }
#ja-mainnav li { float: left; margin: 0; padding: 0; } /* Für alle Listeneinträge */
#ja-mainnav li ul { /* für die Listen der 2. Ebene */
width: 202px;
position: absolute;
left: -999em;
}

#ja-mainnav ul ul a { width: 160px; } /* sub-links */
#ja-mainnav li ul ul { margin: -42px 0 0 200px; } /* für die Listen der 3. Ebenen und darüber */
#ja-mainnav li:hover ul ul,
#ja-mainnav li:hover ul ul ul,
#ja-mainnav li.sfhover ul ul,
#ja-mainnav li.sfhover ul ul ul {
left: -999em;
}

#ja-mainnav li:hover ul,
#ja-mainnav li li:hover ul,
#ja-mainnav li li li:hover ul,
#ja-mainnav li.sfhover ul,
#ja-mainnav li li.sfhover ul,
#ja-mainnav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

/* 2. Abschnitt: alle Festlegungen für das Design der Elemente*/
/* für alle Ebenen */
#ja-mainnavwrap { border-top: 1px solid #666666; background: #444444; }
#ja-mainnav ul, #ja-mainnav li { background-image: none; list-style: none; }
#ja-mainnav span.separator { display:none; }
/* Für die 1. Ebene */
#ja-mainnav > ul { background-color: #444444; padding-left: 20px; }
#ja-mainnav > ul > li {
background-color: #444444;
border-left: 1px solid #666666;
border-right: 1px solid #333333;
margin-right: 1px;
}

#ja-mainnav > ul > li.active {
background: url(../../../images/marks/navigation/sos/arrow2.png) no-repeat bottom center #444444;
color: #CCCCCC;
}

#ja-mainnav > ul > li:hover,
#ja-mainnav > ul > li:active,
#ja-mainnav > ul > li:focus {
background: url(../../../images/marks/navigation/sos/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}

/* -------- sub-levels -------- */
#ja-mainnav ul ul li {
border-left: 1px solid #666666;
border-right: 1px solid #333333;
border-top: 1px solid #666666;
border-bottom: 1px solid #333333;
margin-bottom: 1px;
}

#ja-mainnav li ul { background-color: #555555; /* second-level lists */ }

#ja-mainnav li a {
color: #CCCCCC;
font-weight: bold;
text-decoration: none;
}

#ja-mainnav ul ul li:hover,
#ja-mainnav ul ul li:active,
#ja-mainnav ul ul li:focus {
background: #444444;
color: #FFFFFF;
}


/*old css*/
/* Son of Suckerfish Dropdowns
---------------------------------------------------------
Originally developed by Patrick Griffiths and Dan Webb
http://www.htmldog.com/articles/suckerfish/dropdowns/
---------------------------------------------------------
NOTE: After a deep research, we decide to divide this
CSS into 2 parts. The first part will define the layout.
The second part will define the visual look for this menu.
---------------------------------------------------------*/

#ja-mainnav ul.menu {
margin: 0; /* all lists */
padding: 0;
float: left;
border-right: 1px solid #555555;
}

#ja-mainnav ul.menu ul {
margin: 0; /* all lists */
padding: 0;
}

#ja-mainnav ul.menu li {
margin: 0; /* Alle Listenelemente */
padding: 0;
float: left;
display: block;
background: none;
cursor: pointer;
position: relative;
list-style: none;
}

#ja-mainnav ul.menu li ul {
width: 16.4em;
position: absolute; /* Liste der 2. Ebene */
z-index: 99;
height: auto;
w\idth: 15.9em;
}

#ja-mainnav ul.menu li ul ul {
margin: -1.5em 0 0 14em; /* für die Liste ab 3. und darüber Ebenen läßt sich die Überlappung zum Elternelemen festlegen */
}

#ja-mainnav ul.menu li li {
padding: 0 1em 0 0;
margin: 0;
width: 14.9em;
}

#ja-mainnav ul.menu ul a {
width: 14.8em;
w\idth: 10.8em;
}

#ja-mainnav ul.menu li ul {
/* es wird ein negativer Wert bevorzugt, weil das Objekte so außerhalb der Seite liegt,
anstatt von display: none, denn display none versteckt das Objekt auch für Textbrowser */
left: -999em;
}

#ja-mainnav ul.menu li:hover ul ul,
#ja-mainnav ul.menu li:hover ul ul ul,
#ja-mainnav ul.menu li.sfhover ul ul,
#ja-mainnav ul.menu li.parentsfhover ul ul,
#ja-mainnav ul.menu li.parent-activesfhover ul ul,
#ja-mainnav ul.menu li.activesfhover ul ul,
#ja-mainnav ul.menu li.sfhover ul ul ul,
#ja-mainnav ul.menu li.parentsfhover ul ul ul,
#ja-mainnav ul.menu li.parent-activesfhover ul ul ul,
#ja-mainnav ul.menu li.activesfhover ul ul ul {
left: -999em;
}

/* Macht die Unter-Menüs wieder sichtbar, die vorher durch left: -999em versteckt wurden */
#ja-mainnav ul.menu li:hover ul,
#ja-mainnav ul.menu li li:hover ul,
#ja-mainnav ul.menu li li li:hover ul,
#ja-mainnav ul.menu li.sfhover ul,
#ja-mainnav ul.menu li.parentsfhover ul,
#ja-mainnav ul.menu li.parent-activesfhover ul,
#ja-mainnav ul.menu li.activesfhover ul,
#ja-mainnav ul.menu li li.sfhover ul,
#ja-mainnav ul.menu li li.havesubchildsfhover ul,
#ja-mainnav ul.menu li li.havesubchild-activesfhover ul,
#ja-mainnav ul.menu li li.activesfhover ul,
#ja-mainnav ul.menu li li li.sfhover ul,
#ja-mainnav ul.menu li li li.havesubchildsfhover ul,
#ja-mainnav ul.menu li li li.havesubchild-activesfhover ul,
#ja-mainnav ul.menu li li li.activesfhover ul {
left: auto;
}



/* Nur Styling für's Menü -----------------------------------*/
/* erste Ebene */
#ja-mainnav ul.menu li a {
margin: 0;
padding: 5px 10px; /* mit diesen Werten läßt sich die Höhe der Menüeinträge der 1. Ebene festlegen*/
border-left: 1px solid #555555;
border-right: 1px solid #333333;
display: block;
color: #CCCCCC;
font-weight: bold;
line-height: normal;
text-decoration: none;
}

#ja-mainnav ul.menu li a:hover,
#ja-mainnav ul.menu li a:active,
#ja-mainnav ul.menu li a:focus {
background: url(../../../images/marks/navigation/sos/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}

#ja-mainnav ul.menu li {
margin: 0;
}

#ja-mainnav ul.menu li:hover,
#ja-mainnav ul.menu li.sfhover,
#ja-mainnav ul.menu li.parentsfhover,
#ja-mainnav ul.menu li.parent-activesfhover {
background: url(../../../images/marks/navigation/sos/arrow2.png) no-repeat bottom center #555555;
color: #FFFFFF;
}

#ja-mainnav ul.menu li.active a,
#ja-mainnav ul.menu li.active a:hover,
#ja-mainnav ul.menu li.active a:active,
#ja-mainnav ul.menu li.active a:focus {
background: url(../../../images/marks/navigation/sos/arrow2.png) no-repeat bottom center #333333;
color: #FFFFFF;
}

/* 2. Ebene und darüber */
#ja-mainnav ul.menu li ul {
border: 1px solid #555555;
background: url(../../../images/marks/navigation/sos/opaque.png);
}

#ja-mainnav ul.menu li ul li {
border-top: 1px solid #777777;
border-bottom: 1px solid #444444;
background: none;
}

#ja-mainnav ul.menu li ul a {
border-right: none;
margin: 0;
padding: 3px 10px; /* mit diesen Werten läßt sich die Höhe der Menüeinträge ab der 2. Ebene festlegen*/
background: none;
color: #CCCCCC;
font-weight: normal;
line-height: normal;
text-transform: none;
}

#ja-mainnav ul.menu li.parent,
#ja-mainnav ul.menu li.havesubchild-active {
background: url(../../../images/marks/navigation/sos/parent.gif) no-repeat 96% 50%;
}

#ja-mainnav ul.menu li ul a:hover,
#ja-mainnav ul.menu li ul a:active,
#ja-mainnav ul.menu li ul a:focus,
#ja-mainnav ul.menu ul li:hover,
#ja-mainnav ul.menu ul li.sfhover,
#ja-mainnav ul.menu ul li.havesubchildsfhover,
#ja-mainnav ul.menu ul li.havesubchild-activesfhover,
#ja-mainnav ul.menu ul ul li:hover,
#ja-mainnav ul.menu ul ul li.sfhover,
#ja-mainnav ul.menu ul ul li.havesubchildsfhover,
#ja-mainnav ul.menu ul ul li.havesubchild-activesfhover {
background: #333333;
color: #CCCCCC;
}

#ja-mainnav ul.menu ul li.active a.active_link,
#ja-mainnav ul.menu ul li.active a.active_link:hover,
#ja-mainnav ul.menu ul li.active a.active_link:active,
#ja-mainnav ul.menu ul li.active a.active_link:focus {
background: none !important;
color: #FFFFFF;
font-weight: bold;
}

#ja-mainnav ul.menu li.active li a,
#ja-mainnav ul.menu li.active li a:hover,
#ja-mainnav ul.menu li.active li a:active,
#ja-mainnav ul.menu li.active li a:focus {
background: none !important;
}

#ja-mainnav h3 { display: none; }
#ja-mainnav .moduletable_menu { background: none; margin: 0; padding: 0; }

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
sfHover = function() {
var sfEls = document.getElementById("ja-mainnav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; ++i) {
sfEls[i].onmouseover=function() {
clearTimeout(this.timer);
if(this.className.indexOf(" sfhover") == -1)
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.timer = setTimeout(sfHoverOut.bind(this), 20);
}
}
}

function sfHoverOut() {
clearTimeout(this.timer);
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}

if (window.attachEvent) window.attachEvent("onload", sfHover);
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
81
82
83
84
85
86
87
88
89
90
 if($this->countModules( 'nav_main' )) : ?>





$jyaml->getPosition('modules', 'nav_main', 'raw', ''); ?>



endif; ?>

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:
  1. für die CSS-Datei den Pfad: joomlarootpfad/templates/hm_yaml/css/meinDESIGN/navigation/
  2. für die Script-Datei den Pfad: joomlarootpfad/templates/hm_yaml/scripts/meinDESIGN/
  3. 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).