Browse by Category
Adding custom css class
This parameter allows you to extend the style for each of your menu items. Some guidelines and key features are listed below:
- This parameter has no default value.
- Using this parameter you can override/extend the style of each menu item, just by creating a special styling class, and use it as a value for this parameter.
- This parameter applies to Mega Menu only.
In order to do so, click on Helix Megamenu Options tab and scroll down and add class demo as shown ion the below screenshot.
Now add below code to your template.css file in order to see above output.
Loading module as menu items
This section shows the process of loading different types of modules as menu items. You can normally load any type of module you want as custom html or regular Joomla! modules. You can also load unique module positions you have setup for your modules, and positions that are not defined in your template.
Just to show an example, we are going to load the default Joomla! Login Module as a menu item. First go to Menu Item Manager of the Main Menu. Now click on the New button to add a new menu item, then proceed through the following steps:
Step 1: First of all you need to select Menu item type. In order to do so, click on select and then select suitable menu item type. In this example we use menu type as Login Form.
Step 2: type in a Title for this menu item.
Step 3: click the Helix Mega Menu Options tab to open mega menu parameters;
Step 4: select Submenu Content type as module.
Step 5: scroll down and select Login, this is the module we are going to load.
Step 6: click the Save button and go to frontend, refresh the page, and hover your mouse over the new menu item.
Setting up columns
We are highly privileged to present to you the Features menu item structure. Take a closer look at the menu structure on the left side and the frontend view on the right side; it gives you options to edit some more menu parameters:
The columns, as marked, give options for changing Explore menu item parameters to show up its child menu items in the frontend properly. You can customize it by clicking this menu:
- Step 1 - click the "Helix Mega Menu Options" tab to edit the megamenu parameters
- Step 2 - set the column number at 3, it applies to each menu item: Features, Menu Showcase and Custom HTML
- Step 3 – customize the width for the entire child content area
- Step 4 – customize the width for each column to make it look more appealing
- Click the Save button, go to frontend, refresh the page and see the changes
Grouping menu items
Menu items will have no Mega Menu parameters if it is the first time you are enabling Mega Menu. Therefore it will look similar to a regular Moo Menu:
In the image given above, you can see the Features menu item showing four child menu items:
• Module Positions,
• Module Variations,
• Error Page
You have to edit each items to make it appear along with its child item; thus the contents of parent and child menu items will show up. You have to click the Features menu item to do it.
As the image given above shows- just selecting Yes for the Group option will group the Freatures menu item with its child menu items into a compact column to link with the parent menu item Features option appears at the top of the first column of the main menu item Joomla! Stuff. Now you can do the same thing for the other two parent menu items,i.e. Menu Menu Showcase and Custom HTML.
Adding menu icons
If you want to add icons to your menu, you first have to upload your favorite icons to the your_site_root/images (images/stories for joomla 1.5) folder.
Please note that the icons must not exceed 16x16 pixels; it is a MUST if you want to avoid layout breaks. Advanced users can make it happen by customizing menu style classes.
In the next step, from the administration option of your website, navigate to Menus - Main Menu, and then click on any menu item to add suitable icon for it.
- Step 1 - For Joomla 1.5 click the Parameters (System) tab and Joomla 1.6 click on Link Type Options tab.
- Step 2 - For Joomla 1.5, select your desired icon from the select drop-down box and for Joomla 1.6 browse and select a Link Image.
- Step 3- click the Save button to apply these changes.
Getting started with megamenu
This tutorial is a step-by-step guide to lead you through the settings of megamenu.
First of all set the Menu Type as Megamenu and select the menu module that you want to show as your horizontal navigation.
Now have a look at the menu tree that we are are going to manipultate.
Advanced Menu System includes Mega menu, Dropline Menu, Split Menu and MooMenu using which you can design such a sophisticated website that will leave the browsers stunned.
To set your desire menu type goto Extensions->Template Manager. Now click on a Helix framework based template and then click on Menu tab.
Here, you'll see all options for Helix menu systems. At first select the menu that you want to show your main navigation. Then select menu type from available 4 types if menu.
Drop Down Column Width
Here you can set the width of the columns in the dropdown menu in pixels. When you set it to e.g. 200 and you set your dropdown menu to have three columns, the dropdown menu will be 600 px wide. Individual column width of dropdown menu can be changed via helix plugin.
Show Menu Image
If you want to show menu item image then set the option as yes.
Select the type of animation for the dropdown menu. You can set animation as slide, fade or no effect.
Set the duration in ms for the menu dropdown, eg. 400.
Select mootools transition for the menu animation.
Initial X and Y Offset
Set the X-Offset and Y-Offset of the first level drop-down menu in pixel.
Subsequent X and Y Offset
Set the X-Offset and Y-Offset of the second or higher level drop-down menu in pixel.