Knowledgebase

Das Modul mod_mainmenu

Wissenwertes zum Modul Mainmenü.

Dieses Joomla-Standard-Modul ist sehr sauber strukturiert, wird aber leider so nicht von VirtueMart unterstützt. Dadurch sähen VM-Module immer etwas anders aus als der Rest der Seiten-Menüs. Damit auch VM die mod_mainmenu Optik einschließlich der dazugehörigen CSS-Dateiein gemeinsam mit Joomla nutzten kann, wurde von mir für das Modul vm_modmainmenu.php entwickelt. Es nutzt die VM-Kategorien um anhand dessen eine Menübaum mit gleichem Verhalten aufzubauen.

Menü Son Of Suckerfish in Joomla implementieren

  • Drucken
Bewertung:  / 0
Details
Hauptkategorie: Joomla und Erweiterungen (Templates, Komponenten, Plugins, Module)
Zuletzt aktualisiert am Montag, 19. März 2012 16:47

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).
Kommentar schreiben

Das Script vm_modmainmenu.php

  • Drucken
Bewertung:  / 0
Details
Hauptkategorie: Joomla und Erweiterungen (Templates, Komponenten, Plugins, Module)
Zuletzt aktualisiert am Montag, 19. März 2012 16:47
Nachfolgendes PHP-Script enthält die Classe zur Erzeugung der Strukturen für das mod_mainmenu für Virtuemart - erzeugt also eine Categry-Display-Type zur Darstellung als Navigationsmenü im Listenformat.
joomlapfad/modules/mod_virtuemart/vm_modmainmenu.php 
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
 
if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
/**
*
* @copyright Copyright (C) 2009  kraft - All rights reserved.
*/
 
/* The class to manage and show product categories */
class modmainmenutree extends vmAbstractObject {
 
	/**
	 * @param int $category_id The category to be highlighted
	 * @return string HTML code with the link list
	 */
	function get_category_mainmenu( $curr_cat_id=0 ) {
		global $sess;
		$categories 	= ps_product_category::getCategoryTreeArray(); 
		$result 		= ps_product_category::sortCategoryTreeArray($categories); 
		$id_list		= $result['id_list'];
		$count			= count($id_list);
 
		$sorted_cats = Array();
		for ($n = 0; $n < $count; $n++) {
			$sorted_cats[$n]['category_child_id'] 	= $categories[$id_list[$n]]['category_child_id'];
			$sorted_cats[$n]['category_parent_id']	= $categories[$id_list[$n]]['category_parent_id'];
			$sorted_cats[$n]['category_name'] 		= $categories[$id_list[$n]]['category_name'];
			$sorted_cats[$n]['cat_depth'] 			= $result['depth_list'][$n];
		}		
 
		$allowed_subcats = Array();
		if( !empty( $categories[$curr_cat_id]['category_parent_id'] ) ) {
			$root = $categories[$curr_cat_id];
			$allowed_subcats[] = $categories[$curr_cat_id]['category_parent_id'];
			while( !empty( $root['category_parent_id'] )) {
				$root = $categories[$root['category_parent_id']];
				$allowed_subcats[] = $categories[$root['category_child_id']]['category_child_id'];
			}
		}
		for ($n = 0; $n < $count; $n++) {
			if (
				$sorted_cats[$n]['category_parent_id'] == 0
			||	in_array($sorted_cats[$n]['category_child_id'],$allowed_subcats) 
			||	in_array($sorted_cats[$n]['category_parent_id'],$allowed_subcats) 
			||	$sorted_cats[$n]["category_parent_id"] == $curr_cat_id ) { 
				$sorted_cats[$n]['cat_allowed'] = 1; 
			}
 
			if (($sorted_cats[$n+1]['category_parent_id'] > 0) && ($sorted_cats[$n+1]['cat_depth'] > $sorted_cats[$n]['cat_depth'])) {
				$sorted_cats[$n]['cat_isparent'] = "parent";
			} 
			if ( in_array( $sorted_cats[$n]['category_child_id'], $allowed_subcats ) || $sorted_cats[$n]['category_child_id'] == $curr_cat_id ) {
				$sorted_cats[$n]['cat_isactive'] = "active";
			} 
			if ( $sorted_cats[$n]['cat_depth'] > $sorted_cats[$n-1]['cat_depth'] || $n == 0 ) {	
				$sorted_cats[$n]['cat_first_item'] = "first_item";
			} 			
			if ( $sorted_cats[$n+1]['cat_depth'] < $sorted_cats[$n]['cat_depth'] || $n == $count ) {
				$sorted_cats[$n]['cat_last_item'] = "last_item";
			}
		}
 
		$cat_id = 0;
		foreach ( $sorted_cats as $cat ) {
			if ( !$cat['cat_allowed'] ) { array_splice($sorted_cats, $cat_id, 1); } else { $cat_id++; }
		}
 
		$modMainMenuHTML = '';
		$count = count ($sorted_cats);
		for ($n = 0; $n < $count; $n++) {
			$liClass = "";
			$liID 	= "";
			$aClass = "";
			$catname = shopMakeHtmlSafe( $sorted_cats[$n]['category_name'] );
			if ( !empty($sorted_cats[$n]['cat_first_item']) )	{ $liClass .= " ". $sorted_cats[$n]['cat_first_item']; }
			if ( !empty($sorted_cats[$n]['cat_last_item']) )	{ $liClass .= " ". $sorted_cats[$n]['cat_last_item']; }
			if ( !empty($sorted_cats[$n]['cat_isparent']) )		{ $liClass .= " ". $sorted_cats[$n]['cat_isparent']; }
			if ( !empty($sorted_cats[$n]['cat_isactive']) )		{ $liClass .= " ". $sorted_cats[$n]['cat_isactive']; }
			if ( $sorted_cats[$n]['category_child_id'] == $curr_cat_id ) { $liID .= ' id="current"'; }
			if ( !empty($sorted_cats[$n]['cat_isactive']) || $sorted_cats[$n]['category_child_id'] == $curr_cat_id ) {
				$aClass = ' class="';
				if ( !empty($sorted_cats[$n]['cat_isactive']) )	{ $aClass .= 'active_link'; }
				if ( $sorted_cats[$n]['category_child_id'] == $curr_cat_id ) { $aClass .= ' current_link'; }
				$aClass .= '"';
			}
 
			$ULLI = "";
			if ( !empty($sorted_cats[$n]['cat_first_item']) ) { $ULLI = "
    "; }
    			if ( $n == 0 ) { $ULLI = '
      '; }
      			if ( !empty($sorted_cats[$n-1]['cat_last_item']) ) { 
      				$ULLI = str_repeat("
    "    , $sorted_cats[$n-1]['cat_depth'] - $sorted_cats[$n]['cat_depth']) . ''; 
    			}
    			$modMainMenuHTML .= $ULLI .'
  • . $sorted_cats[$n]['category_child_id'] . $liClass.'"'. $liID.'>';
    			$modMainMenuHTML .= ' . $aClass. ' href="'. $sess->url(URL."index.php?page=shop.browse&category_id=" . $sorted_cats[$n]['category_child_id']);
    			$modMainMenuHTML .= '" title="'.$catname.'">';
    			$modMainMenuHTML .= $catname;
    			$modMainMenuHTML .= ps_product_category::products_in_category( $sorted_cats[$n]['category_child_id'] ) ;
    			$modMainMenuHTML .= '';
    		}
     
    		if ( $sorted_cats[$count-1]['cat_depth'] > 0 ) {
    			$modMainMenuHTML .= str_repeat("
", $sorted_cats[$count-1]['cat_depth'] );
		}
		$modMainMenuHTML .= "" ;
 
		return $modMainMenuHTML;
	}
}
Kommentar schreiben

Das Standard-Modul mod_mainmenu von Joomla

  • Drucken
Bewertung:  / 0
Details
Hauptkategorie: Joomla und Erweiterungen (Templates, Komponenten, Plugins, Module)
Zuletzt aktualisiert am Montag, 19. März 2012 16:47

Das Joomla mod_mainmenu

"mainmenu" ist das Standard Menü-Modul von Joomla. Für dieses Menü gibt es eine eigene Style-Sheet-Datei, die für die besondere Optik des Menüs sorgt. Dazu gehört:

  1. Das Kennzeichnen ob Menüeinträgen (parent) Untermenüpunkte haben oder nicht
  2. Das Kennzeichnen des gerade aktiven Menüpunktes (current) - Menüpunkt der gerade aktuell sichtbaren Seite
  3. Das Kennzeichnen aufgeklappter Menüeinträge (acitve)
  4. Das hirarchische Einrücken untergeordeneter Menüeinträge (level)
  5. Die evtl. genutzte besondere Kennzeichnung des ersten (first_item) und letzten Menüeintrages innerhalb einer Ebene (last_item)
  6. Und schließlich noch die Möglichkeit einer ID-abhängigen individuelle Formatierung von Menüeinträgen (itemID)
Mit der Summe dieser Ausweisungen erhält der Designer umfassende Formatierungsmöglichkeiten für das Gestalten, das Design und die Funktion seiner Menüs.

Die Struktur eines mod_mainmenu

Das Modul MainMenü ist grundsätzlich wir folgt strukturiert:

Beispiel eine mod_mainmenu-Menüs 
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
 
<ul class="menu">
	<li class="first_item item1">
		<a href="A"><span>A</span></a>
	</li>
	<li class="parent active item27">
		<a href="B" class="active_link"><span>B</span></a>
		<ul>
			<li class="first_item parent active item34">
				<a href="B.1" class="active_link"><span>B.1</span></a>
				<ul>
					<li class="first_item item75">
						<a href="B1.1"><span>B1.1</span></a>
					</li>
					<li id="current" class="first_item active item74">
						<a href="B1.2" class="active_link current_link"><span>B1.2</span></a>
					</li>
					<li class="last_item item75">
						<a href="B1.3"><span>B1.3</span></a>
					</li>
				</ul>
	</li>
			<li class="last_item item59">
				<a href="B.2"><span>B.2</span></a>
			</li>
		</ul>
	</li>
	<li class="item60">
		<a href="C"><span>C</span></a>
	</li>
	<li class="last_item item73">
		<a href="D"><span>D</span></a>
	</li>
</ul>

Wichtig ist hier zu erkennen, wann current, acitive, current_link, active_link sowie last_item und first_item gesetzt werden und wie der richtige Aufbau der Listen erfolgt.

Zu den Regeln im Detail:

  • Hat ein Menüeintrag Childs, dann erhält die LI-Klasse immer (nicht nur wenn gerade active) den zusätzlichen Eintrag „parent". Damit kann dann im Item-Style kenntlich gemacht werden, dass es Untereinträge gibt, z.B. durch ein Plus-Zeichen vor dem Parent-Eintrag oder durch „..." oder ein Weiter-Dreieck nach dem Parent-Menüeintrag.
  • Das gerade ausgewählte Listenelement/Menüeintrag erhält immer "current" und current_link immer genau das eingeschlosse a-Tag. Das ist also die Seite die gerade aufgerufen wurde.
  • Der Erste Menüeintrag einer Tiefenebene erhält jeweils den Classen-Eintrag "first_item", der letzte dieser Ebenen jeweils „last_item". Damit wird eine abweichende Formatierung des ersten und letzten Menüeintrages möglich z.B. durch beginnende oder abschließende Designelemente. Ist ein Untermenüpunkt der einzige auf dieser Ebene, dann ist er weder "first_item" noch "last_item". Beim designen könnte sich das evtl. auch als Nachteil erweisen und es wäre besser einem einzelnen dann sowohl first_item als auch last_item zu vergeben. Darüber habe ich noch nicht abschließend nachgedacht, weil dieser Fall in meinem Design so nicht herausgestellt werden sollte.
  • Die Menüeinträge, die als Elterneintrag aufgeklappt sind, also deren Child-Elemente angezeigt werden sind aktive Menüeinträge (active). Diese erhalten
    1. im jeweiligen LI den Classen-Style „active",
    2. Gleichzeitig bekommt das A-Tag die Classe "active_link"
    3. Auch das gerade aktuelle A-Tag bekommt, obwohl nicht zwingend aufgeklappt neben dem "current_link" die Style-Class „active_link".
    Damit sind also acitve Element immer nur oberhalb des current-links sinnvoll und richtig.
  • Jeder Menüeintrag erhält im LI-Tag einen ID-Eintrag "itemID" - für die ID-Nummer diesen Menüpunkt. Für den Designer bietet das die Möglichkeit Menüeinträge speziell zu gestalten, z.B. jedem Menüeintrag eine eigene Farbe zuzuweisen oder ein individuelles Icon voranzustellen.
Kommentar schreiben

Die nav_list.css

  • Drucken
Bewertung:  / 0
Details
Hauptkategorie: Joomla und Erweiterungen (Templates, Komponenten, Plugins, Module)
Zuletzt aktualisiert am Montag, 19. März 2012 16:47
Zur Gestaltung der Menüs wird dann natürlich noch die CSS-Datei für die Navigation benötigt - also z.B. eine nav_list.css.
Nachfolgende Datei muss in das Verzeichnis gelegt werden, wo die Navigationstyles abgelegt sind. Ich arbeite bevorzugt mit hmjaml als Template.
Diese CSS-Datei bietet die Formatierung für eine Navigationstiefe bis Level 4 an. Weitere Tiefen z.B. bis Level 7 können von mir bereitgestellt werden.
nav_vlist bis Level 4.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

@charset "UTF-8";
/**
 * @copyright       Copyright 2001  St. Kraft
 
@media screen, projection
{
  #main .menu {
    width: 100%;
    overflow: hidden;
    margin:0;
    list-style-type: none;
  }
 
  #main .menu ul { list-style-type: none; margin:0; padding: 0; }
  #main .menu li { float:left; width: 100%; margin:0; padding: 0 }
 
  #main .menu a,
  #main .menu span.separator {
    display:block;
    padding:3px 0 3px 10%;
    text-decoration: none;
    color: #444;
  }
 
  #main .menu li#current a.active_link {
    font-weight: bold;
    color: #fff;
    cursor:default;
  }
 
  /* Level 1 ----------------------OK---------------------------  */
  #main .menu li a { padding-left: 13px; 
	background: #fff url(../../../images/pvh/navigation/NavList/L1_no.gif) no-repeat; }
  #main .menu li a:focus,
  #main .menu li a:hover,
  #main .menu li a:active { 
  	background: #DEF url(../../../images/pvh/navigation/NavList/L1_no-mo.gif) no-repeat; }
  #main .menu li.parent a {
	background: #fff url(../../../images/pvh/navigation/NavList/L1_pa.gif) no-repeat; }
  #main .menu li.parent a:focus,
  #main .menu li.parent a:hover,
  #main .menu li.parent a:active { 
  	background: #DEF url(../../../images/pvh/navigation/NavList/L1_pa-mo.gif) no-repeat; }
 
  #main .menu li#current a.current_link { 
	background: #608BC0 url(../../../images/pvh/navigation/NavList/L1_no-cu.gif) no-repeat; }
  #main .menu li#current.parent a.current_link {
	background: #608BC0 url(../../../images/pvh/navigation/NavList/L1_pa-cu.gif) no-repeat; }
 
  #main .menu li.parent.active a.active_link {
	background: #fff url(../../../images/pvh/navigation/NavList/L1_pa-ac.gif) no-repeat; }
  #main .menu li.active a.active_link:focus,
  #main .menu li.active a.active_link:hover,
  #main .menu li.active a.active_link:active {
	background: #DEF url(../../../images/pvh/navigation/NavList/L1_pa-ac-mo.gif) no-repeat; }
 
  /* Level 2 -----------------------OK-------------------------- */
  #main .menu li.parent.active ul li a { padding-left: 20px; 
	background: #fff url(../../../images/pvh/navigation/NavList/L2_no.gif) no-repeat; }
  #main .menu li.parent.active ul li a:focus,
  #main .menu li.parent.active ul li a:hover,
  #main .menu li.parent.active ul li a:active { 
  	background: #DEF url(../../../images/pvh/navigation/NavList/L2_no-mo.gif) no-repeat; }
  #main .menu li.parent.active ul li.parent a {  
	background: #fff url(../../../images/pvh/navigation/NavList/L2_pa.gif) no-repeat; }
  #main .menu li.parent.active ul li.parent a:focus,
  #main .menu li.parent.active ul li.parent a:hover,
  #main .menu li.parent.active ul li.parent a:active {  
	background: #DEF url(../../../images/pvh/navigation/NavList/L2_pa-mo.gif) no-repeat; } /*NEU EXPORTIEREN*/
 
  #main .menu li.parent.active ul li#current.active a.current_link { padding-left: 20px;
	background: #608BC0 url(../../../images/pvh/navigation/NavList/L2_no-cu.gif) no-repeat; }
  #main .menu li.parent.active ul li#current.parent.active a.current_link { padding-left: 20px;
	background: #608BC0 url(../../../images/pvh/navigation/NavList/L2_pa-cu.gif) no-repeat; }
 
  #main .menu li.parent.active ul li.parent.active a.active_link {
	background: #fff url(../../../images/pvh/navigation/NavList/L2_pa-ac.gif) no-repeat; }
  #main .menu li.parent.active ul li.parent.active a.active_link:focus,
  #main .menu li.parent.active ul li.parent.active a.active_link:hover,
  #main .menu li.parent.active ul li.parent.active a.active_link:active {
	background: #DEF url(../../../images/pvh/navigation/NavList/L2_pa-ac-mo.gif) no-repeat; }
 
  /* Level 3 -------------------------ok------------------------  */
  #main .menu li.parent.active ul li.parent.active ul li a { padding-left: 27px; 
	background: #fff url(../../../images/pvh/navigation/NavList/L3_no.gif) no-repeat; }  
  #main .menu li.parent.active ul li.parent.active ul li a:focus,
  #main .menu li.parent.active ul li.parent.active ul li a:hover,
  #main .menu li.parent.active ul li.parent.active ul li a:active { 
 	background: #DEF url(../../../images/pvh/navigation/NavList/L3_no-mo.gif) no-repeat; }
  #main .menu li.parent.active ul li.parent.active ul li.parent a { padding-left: 27px;
	background: #fff url(../../../images/pvh/navigation/NavList/L3_pa.gif) no-repeat; }
  #main .menu li.parent.active ul li.parent.active ul li.parent a:focus,
  #main .menu li.parent.active ul li.parent.active ul li.parent a:hover,
  #main .menu li.parent.active ul li.parent.active ul li.parent a:active {  
	background: #DEF url(../../../images/pvh/navigation/NavList/L3_pa-mo.gif) no-repeat; }
 
  #main .menu li.parent.active ul li.parent.active ul li#current.active a.current_link { padding-left: 27px;
	background: #608BC0 url(../../../images/pvh/navigation/NavList/L3_no-cu.gif) no-repeat; }
  #main .menu li.parent.active ul li.parent.active ul li#current.parent.active a.current_link { padding-left: 27px;
	background: #608BC0 url(../../../images/pvh/navigation/NavList/L3_pa-cu.gif) no-repeat; }
 
  #main .menu li.parent.active ul li.parent.active ul li.parent.active a.active_link {
	background: #fff url(../../../images/pvh/navigation/NavList/L3_pa-ac.gif) no-repeat; }
  #main .menu li.parent.active ul li.parent.active ul li.parent.active a.active_link:focus,
  #main .menu li.parent.active ul li.parent.active ul li.parent.active a.active_link:hover,
  #main .menu li.parent.active ul li.parent.active ul li.parent.active a.active_link:active {
	background: #DEF url(../../../images/pvh/navigation/NavList/L3_pa-ac-mo.gif) no-repeat; }
 
  /* Level 4 ---------------------------------------------------  */
  #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li a { padding-left: 34px; 
	background: #fff url(../../../images/pvh/navigation/NavList/L4_no.gif) no-repeat; }  
  #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li a:focus,
  #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li a:hover,
  #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li a:active { 
 	background: #DEF url(../../../images/pvh/navigation/NavList/L4_no-mo.gif) no-repeat; }
  #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent a { padding-left: 34px;
	background: #fff url(../../../images/pvh/navigation/NavList/L4_pa.gif) no-repeat; }
  #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent a:focus,
  #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent a:hover,
  #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent a:active {  
	background: #DEF url(../../../images/pvh/navigation/NavList/L4_pa-mo.gif) no-repeat; }
 
  #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li#current.active a.current_link { padding-left: 34px;
	background: #608BC0 url(../../../images/pvh/navigation/NavList/L4_no-cu.gif) no-repeat; }
  #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li#current.parent.active a.current_link { padding-left: 34px;
	background: #608BC0 url(../../../images/pvh/navigation/NavList/L4_pa-cu.gif) no-repeat; }
 
  #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent.active a.active_link {
	background: #fff url(../../../images/pvh/navigation/NavList/L4_pa-ac.gif) no-repeat; }
  #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent.active a.active_link:focus,
  #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent.active a.active_link:hover,
  #main .menu li.parent.active ul li.parent.active ul li.parent.active ul li.parent.active a.active_link:active {
	background: #DEF url(../../../images/pvh/navigation/NavList/L4_pa-ac-mo.gif) no-repeat; }
 
}
Kommentar schreiben

Die Implementierung von vm_modmainmenu

  • Drucken
Bewertung:  / 0
Details
Hauptkategorie: Joomla und Erweiterungen (Templates, Komponenten, Plugins, Module)
Zuletzt aktualisiert am Montag, 19. März 2012 16:47

Den neuen Menütyp "vm_modmainmenu" als mod_mainmenu-Clone in VM einbinden

Joomla bietet einen modernen und eleganten Menütyp mod_mainmenu an, der zudem als Modul sehr leistungsfähig und flexibel konfigurierbar ist. Über stylesheets lassen sich diese Menüs sehr einfach gestalten und bieten gute Möglichkeiten dies auch ergonomisch zu tun. VM nutzt jedoch seine eigenen Menü. Diese Categorie-Display-Typen sind als Modulbestandteile von mod_virtuemart zu finden unter joomlapfad/modules/mod_virtuemart/... Hier gibt es z.B. die Menütypen: dTree, JSCook, TigraTree, ThemeNavy, ThemeXP und vm_trensmenu. Keines dieser Menüs liefert aber eine Style-Class-Strukturen in gleicher Weise wie von mod_mainmenu erwartet. Leider. Will man als Designer aber die gesamt Seite einheitlich gestalten und so auch die VM-Menüs im gleichen Look-n-Feel anzeigen, dann müsste man diese mitgebrachten Menüs umgestalten und hätte schlimmstenfalls redundante Menüs - gleich aussehend aber mit jeweils ihren eigenen Scripten und CSS-Dateien. Hinzu kommt, dass die Struktur und z.B. Funktionslogik dieser Menüs anderen Prinzipien folgt und somit eine gleiche Funktion nur aufwendig zu erreichen ist. Diese Mühe habe ich mir gemacht und für VM ein mod_mainmenü als Categorie-Display-Type für das Module mod_virtuemart erstellt.
Dieses mod_mainmenu wird aber von VM nicht in gleicher Weise genutzt. Statt dessen nutzt VM eigene Menüs und liefert davon auch gleich ein paar verschiedene Varianten mit. Diese Categorie-Display-Typen sind als Modulbestandteile von mod_virtuemart zu finden unter joomlapfad/modules/mod_virtuemart/... Hier gibt es z.B. die Menütypen: dTree, JSCook, TigraTree, ThemeNavy, ThemeXP und vm_trensmenu. Keines dieser Menüs liefert aber eine Style-Class-Strukturen in gleicher Weise wie von mainmenu erwartet. Leider. Also muss für VM ein neuer mod_virtuemart-Categorie-Display-Typ her.

Um das neue Menü einzubinden wurde zunächst untersucht über welche Wege das erfolgen kann. In Betracht gezogen wurden 3 Varianten. Die dritte wurde schließlich praktiziert.

Schaut man sich das Script mod_virtuemart.php ab ca. Zeile 70 in joomlapfad/modules/mod_virtuemart/ mal an, sieht man die unterschiedliche Einbindung von separaten/externen Zusatz-Menu-Typen ...

joomlapfad/modules/mod_virtuemart/mod_virtuemart.php 
1
2
3
4
5
 
...
elseif( $menutype == "transmenu" ) {
 include_once( $mod_dir . '/vm_mod_mainmenu.php' );
}
..

... und der VM-eigenen Menü-Classe über die Funktion get_category_tree des Objektes ps_product_category in der Classenbibliothek joomlapfad/administrator/com_virtuemart/classes/ps_product_category.php

joomlapfad/administrator/com_virtuemart/classes/ps_product_category.php 
1
2
3
4
5
6
 
...
if ( $menutype == 'links' ) {
 /* MENUTPYE LINK LIST */
 echo $ps_product_category->get_category_tree( $category_id, $class_mainlevel ); 
}
...

Variante 1: Category-Display-Type "Link List" modifizieren
Dieser Type ist als Standard-Basis-Menüversion in VM tief verwurzelt - also nicht als externer Category-Display-Type eingebunden - und damit schwer zu modifizieren und immer auch nur durch intensive Eingriffe ist die VM-Scripte. In Hinblick auf die Updatefähigkeit von VM ist das nicht zu empfehlen. "Link List" wird auch anders eingebunden als die anderen Menüvarianten. Davon sollte man die Finger weglassen.

Variante 2: Duplizierung und Modifikation von z.B. "dTree" o.a.
Eine weitere Möglichkeit könnte sein, eines der mitgelieferten Module zu einem eigenen umzumodeln. Leider ist aber das, was all diese anderen Display-Typen ausliefern noch weiter von mod_mainmenu und deren Style-Strukturen entfernt als "Link List" und wurde deshalb als Variante verworfen - auch wenn es eigentlich der zu favorisierende Weg wäre. Der Aufwand der Anpassung schien mir hier aber zu hoch.

Variante 3: Ein ausgelagertes Menü mit ähnlichem Aufruf als Funktion wie bei "Link List"
Gleich vorweg: Diese Variante wurde schließlich praktiziert. Es ist quasi ein Mischweg aus 1 und 2. Einbebunden über require_once wird eine speparate vm_modmainmenu.php. Die dort enthaltene Funktion zur Menüausgabe wir aufgerufen und deren Rückgabewert über echo ausgeben.

Der Aufruf dieses neuen Display-Types erfolgt also durch Einfügung in der mod_virtuemart.php ab ca. Zeile 93 wie folgt...

joomlapfad/modules/mod_virtuemart/mod_virtuemart.php 
94
95
96
97
98
 
elseif( $menutype == "modmainmenu" ) {
 require_once( 'vm_modmainmenu.php' );
 $modmainmenutree =& new modmainmenutree();
 echo $modmainmenutree->get_category_mainmenu( $category_id, $class_mainlevel );
}

Kurz zur Erläuterung der 4 Scriptzeile: Wird als gewünschter Menutype "modmainmenu" erkannt, dann wird die externe neu zu erstellende Datei vm_modmainmenu.php eingebunden. Es wird eine neues Objekt $modmainmenutree instanziert und dann durch Übergabe der Kategrorie ID und das Haupt-Levels aufgerufen.

Damit VM mit dem Menutype "modmainmenu" etwas anzufangen weiss, muss diese 1. im der mod_virtuemart.xml bekannt geben werden. Das erfolgt durch Einfügen folgender Zeile im Block

joomlapfad/modules/mod_virtuemart/mod_virtuemart.xml 
174
175
176
177
178
179
180
181
182
183
 
<param name="menutype" type="list" default="links"
	label="Category display type"
	description="You can set the display ... displayed in a dTree structure.">
	<option value="links">Link List</option>
	<option value="tigratree">TigraTree</option>
	<option value="jscook">JSCook</option>
	<option value="transmenu">TransMenu</option>
	<option value="dtree">dTree</option>
	<option value="modmainmenu">Joomla Modul MainMenu</option>
</param>

Wurde diese Zeile dort eingefügt, kann 2. im Joomla Adminbereich unter Erweiterungen > Module > mod_virtuemart unter den Paramatern rechts ganz unten der Category-Display-Type "Joomla Modul MainMenu" ausgewählt werden.

Nun wird noch das Script vm_modmainmenu.php im Verzeichnis joomlapfad/modules/mod_virtuemart/ erstellt und die Style-Sheet-Datei als Navigation eingebunden.


Kommentar schreiben