Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive

Modul VM2 Caterory-Menu/-Navigator

This section is about the Modul VM2 Caterory-Menu/-Navigator for VirtueMart 2 which is accessable by download in our webshop. You can use this high-performance Category-Menu-Module within your shop (s demo project).

The comprehensive functions are described in the shop produkt as well as for which customers this module is useful. Also information about the better performance compared to VM standard solution is given.

Additionally, further information is available about possible questions and setup possibilites beyond the standard configuration.


Customization of the category element colors

In our demonstrator you can see that with increasing depth menu elements are coloured with increasing intensity. Which color is used can be selected in module configuration within the group parameters for vertical list under the option vertical category menu. Some color setups are available already. If this is not enough or you want to realize you coroporate design colors you can use the following tipps.

Basically, the category menu is formatted by an own CSS file. This CSS file is located in the folder modules/mod_vm_mdsk_category/assets/ and is named navigation.vlist.css as you can also see under parameters for vertical list and the option vertical category menu CSS file. You can modify this file by your needs or store a modified file under this path and use this one in the module cinfiguration instead.


    • This CSS file is based on the CSS files for vertical lists like they are provided by Hiebl Media for the Joomla-Template-Framework JYAML. This template owns my greatest appreciation.
    • In the same folder there is also a dropdown.css which controles the style for the category navigator.

If you need more color variety you can extend it by the above mentioned CSS files or by changing/modifying the transparent PNG graphics which are used for the colorization of the menu entries. In the folder /modules/mod_vm_mdsk_category/assets/img/ you can find diverse PNG graphics one for each color version. You can also find them under the option vertical category menu level color in the module configuration if you look at the choices there. In this folder you can store further PNG graphics in your desired color an these graphics will show up in the shortlist for the module and can be saved as configuration option.

Who is wondering at the different color intensities should realize that every sublist is embetted in a superordinated list. So with every additional menu depth the transparent PNG graphics are overlaying to more intensive colors and we get the favored color depth effect in a quite simple way. The advante of this procerdure: With just one small graphic and little effort for style instructions the effct is realized.

If you do not approve this depth effect you can/have to adapt the styles of your menu entries completely by your own by modifying the CSS commands. Right for this flexibility the modue is designed for. Due to the predefined classes and the possibilities creating own classes all wishes can be fulfilled. My aim was it to equip the VirteMart category menu of potential already implemented Joomla templates with classes in that way that you do not need own styles anymore and use the available Joomla templates which leads to a consistent look.


Using own CSS files for the vertical category list

Like alreday mentioned above alternatively to the standard vlist-navigations-CSS navigation.vlist.css in the option vertical category menu CSS file own files can be loaded. To do this the complete path has to be entered in this input field, for example modules/mod_vm_mdsk_category/assets/navigation.vlist.gantry.css or templates/ihrTemplate/css/menulist.css.

Effectively, there are three possibliles of entering:

  • If the input field is left empty no stylesheet file will be loaded.
  • By entering the standard value navigation.vlist.css the accompanyed one is loaded from the directory modules/mod_vm_mdsk_category/assets.
  • All other file inputs have to be always entered with their full path (without slash in front) even if they are located in the assets directory.


Design like in JYAML and Joomla-2.5 menu or Gantry-Template

Joomla 2.5 as well as the both mentioned templates JYAML and Gentry provide very good templates for the display of menus. It is usefull to work with the same classes for the category menus like they are used in Joomla or the above mentioned templates with respect to the consistent appearence of websites and shop sites as well as the shared usage of the style files.

Especially at this point the module offers extensive customization possibilites. For each menu element (li, a, span, last, first, ...), also in dependence of its actual status (active, current, ...), style class seperators can be set.

With version 1.0.5 the option is implemented if a container should be built around the A-tag of a list element. JYAML menus expect a span at this point, Joomla and Gantry do not. Therefore, an option is set if none, span, or div should be used.