Selecting your Menu Style
ColorMatic allows you to choose from 2 menu options:
- SplitMenu - Then venerable SplitMenu is a solid choice for navigation. It works by rendering the top-level menu options horizontally, and the submenu/child items are rendered in a module on the side.
- Suckerfish - Back by popular demand is the drop-down style suckerfish menu.
You can designate which menu style you want to use on your site with a single control in the template manager.
ColorMatic Top Menu
ColorMatic also features custom styling and positioning for a handy Top Menu giving you some extra navigation options for your visitors. The ColorMatic template also includes a set of icons that are perfect for drawing attention to these extra menu options.
To set up your Top Menu for the ColorMatic template, follow these steps:
- From the Joomla Administrator, select Extensions then Module Manager. This will take you to the Module Directory which allows you to configure the placement and configuration of all modules in your joomla website. Find the module named Top Menu and click on it to enter its configuration.
- In the Top Menu configuration Details section, set Show Title to "No", set Position to "top", and set Enabled to "Yes"
- In the Top Menu configuration Parameters section, remove the -nav that is entered into the Menu Class Suffix field, set Menu Style to "Flat List", set Show Menu Icons to "Yes", and set Menu Icon Alignment to "Left"
Now your Top Menu module is published in the Top module position and will display your menu in the top right hand corner of the template. Next, you will need to set up your icons so that they will be displayed next to your top menu links. You can do this by following these steps:
- Place your icon images you wish to use in the images/stories folder in your joomla install. The ColorMatic release includes a Source PNG file (colormatic-icons.png) that contains a wide selection of icons you can use. You can either export these images to the images/stories folder, or create your own and place them in the images/stories folder.
- From the Joomla Administrator, select Menu then Menu Manager. This will take you to the list of available menus. Click the menu item icon to the right of "topmenu". This will list out all of the menu items in the "topmenu". You can add or delete your top menu items here, as well as configure their settings.
- Click on one of the topmenu menu items (for example, Home), this will bring up the Edit Menu Item screen. In the "Parameters" panel in the right column, there is a "Menu Image" dropdown selector. The icons you placed in the images/stories folder will show up in this dropdown, select the one you wish to use for this menu item and click Save at the top. Repeat this for each of your menu items in the "topmenu".
Now your Top Menu is properly configured and will display in the top right corner of the template with icons to the left of each of the menu links as seen in the ColorMatic demo.