Our technical support team is ready to help you with any problems you may have. Submit a support ticket and we'll help you ASAP.
30 DAY GUARANTEED REFUND
Documentation aikon Animated Menu
Aikon Animated Menu ('Menu' henceforth) applies a responsive header to your website. This header may include a menu, your logo, a search bar and social Icons! Right out of the box, it implements responsive layouts, animations, and other advanced UI features.
This is a standard Joomla! Module. To install it you will need to log into your admin interface and select the Extension Manager under the 'Extensions' tab in your top menu (assuming you are using a standard admin interface). Once you're inside, click on the 'Upload Package File' tab (it may already be selected for you), and drag the packaged zip file into the 'Browse' button, or click on the 'Browse' button and select it. Finally, click on the 'Upload & Install' button and you're ready to go.
The module will now be available from the Module Manager found under the 'Extensions' tab in the top menu of the admin interface. An initial module will be created for you, and you can create additional modules by clicking on the 'New' button. Select the modules you have already made in order to configure them. Don't forget to publish them in the correct positioning and on the right pages.
Modules can also be included inside an article. If you'd like to do that, here is some info directly from the Joomla! Documentation portal: http://docs.joomla.org/How_do_you_put_a_module_inside_an_article%3F.
Your menu is configurable through several tabs. The Basic tab includes the absolute basics that are required to implement a basic menu. The Menu Contents tab grants you control over the extra content in the menu bar – icons, search, logo etc. The Design & Positioning tab allows you to take full control over your menu layout and styles, with a plethora of amazing design features. Lastly, the Mobile Settings tab includes everything you need to customize the visibility and UX on mobile devices. The Advanced tab controls more advanced features such as class suffix, alternative layouts and more.
The Basic Tab
The fields in this tab control the bare bones essentials of the module:
Enable jQuery – Have the module include its own jQuery for you. Use this if there is no other element loading jQuery onto the page, as Menu requires jQuery.
Select menu – select a menu for the module to display, from a list of all menus on your site.
Descktop animation – Select an animation for the desktop version of your menu. Some extra fields may appear for some animations, with tooltips explaining their function.
Base Item, Start Level, End level & show sub-menu items – these features are exactly like the corresponding features in the Joomla core menu module. In most cases, you would not need to modify them at all.
The Content Tab
The fields in this tab control additional content that can be displayed inside the menu bar.
Enable social icons – switch to yes to enable social icons. This will reveal the next field for you.
Social icons – This field is hidden, until you enable social icons. Click the button in the field to add you icons. You can select an icon, and add a link to it. You can create multiple such Icons using our advanced Social Icons Modal. Please note that changing the modal saves the changes as you go, so closing it with the X button does NOT cancel your changes. Despite this, you must still save the module using the save module button for all changes to take effect.
- Enable search bar – Switch the search bar on or off. It's position is controlled from the style tab. A Search redirect field will appear should you enable this option. Use it to determine the menu item in which the search results will be displayed.
- Enable Logo – Should a logo be included in the menu bar. Use the Select logo, logo height, and logo width to select and determine the size of your logo
The Design & positioning Tab
This tab is packed with design features for you to implement your wildest menu desires! It is separated into several sections for your convenience.
Dimensions and Positioning Section
Body top padding – As the menu is floating over your site, you may want to add padding to the body so that it will not hide your content. You can use this field to set this value, or leave it at 0.
Limit menu width – Switch this to on to set a maximum width for your menu. Otherwise, it will take on 100% of the view port's [NOTE FOR CONTENT PESONAL: 'view port' is a valid expression] width. A Menu width field will appear as you enable this, It allows you to specify the maximum width of the bar, in PX. If you omit the PX, the module will add it for you.
Enable RTL – switch to yes to enable full RTL support.
Menu elements ordering – as stated before, the menu may consist of a logo, social icons, search bar and a menu of links. With this field, you can control the order in which these elements will be displayed. 'Logo -> menu -> social -> search' is recommended for most users.
Centered – Center the menu in its container, rather than float its content in the direction of the document.
Borders and Separators Section
Enable borders, Enable borders in dropdowns – Switch on or off borders for the respective display element (root level items, and drop downs).
Enable menu bar shade – Switching this to yes allows you to add shadow below your menu Bar. A Shade size and a Shade opacity fields will appear so that you can customize your shade.
Colors & visibility Section
Enable color override – Take full control of your menu bar colors. Switching this to on will reveal all extra fields under this section. SO ALL OTHER FIELDS IN THIS SECTION ARE HIDDEN UNTIL YOU SWITCH THIS TO ON!
The fields in the Colors & Visibility are all color pickers. Most of the fields control the color of the element after which it is named. Hover the labels for more information. A few fields also control extra elements, which are apparent from the hover tooltip, but not from the label:
- The menu bar color field also control the search input text color, and the background for the social icons.
- The root link color – controls the color of all link text in the first level, and all borders.
- The third level will use a color which is a variation of the drop down color you have selected.
- Our themes support menu link images (which you can set as usual from your menu manager).
- On your homepage, if you have a Home menu link, it will not show up as active. This feature is here to help your users find content, instead of drawing their attention by highlighting the default page.
Heads up: The module requires jQuery to function. If you are encountering any problems, please make sure the module is published correctly, and then try switching on 'Load jQuery' (click on 'Yes'). This will make the extension load its own jQuery.
If your new module still isn't working properly, we strongly recommend you follow our troubleshooting tips below.
Mobile Settings Tab
This tab is allows you to override and change the behavior of the menu on mobile devices.
Mobile animation – Allows you to choose an animation for the appearance of the menu, only on mobile devices.
Enable borders mobile – Enable borders on menu items.
Mobile logo, Mobile logo height, mobile logo width – Enable an overriding logo for mobile devices, which will appear instead of the default logo you selected, with the specified dimensions.
Enable dropdowns on mobile – If set to yes, clicking root elements which have sub elements, on mobile, will cause that sub element list to open, and the browser will not navigate to the root link. If you set this to off, then clicking root links will work as normal.
Override bar background on mobile – Enabling this will reveal a color picker field. Use it to change the color of the menu bar, on mobile only (will override your bar color, only on mobile – desktop site will be unaffected).
The module may not work for various reasons. These can all be easily resolved.
The most common reasons are improper configuration of general module information or parameters, and/or a jQuery issue.
You should therefore make sure your module's general configurations are valid and fit your intention:
- Make sure the module has been properly published (check its status in the Module Manager).
- Double-check that the module is positioned correctly.
- Make sure the module has been published on the right page(s).
- Make sure you have the proper editing permissions (if you're using a Joomla! Access Control component).
- Make sure the module's parameters are valid: the module requires correct settings. Check out the rest of the document to make sure everything has been set correctly.
Solving jQuery Issues:
Most extensions require a jQuery plugin. Many of them include added features that enable users to leverage jQuery to the fullest. The only problem is that users often upload jQuery themselves, and by doing so they overwrite the extended version of jQuery, thus preventing the extension from working properly.
The best solution is to make sure only one instance of jQuery is loaded. One way of doing that is to manually check that jQuery is NOT loaded via the form template but by Joomla! only. We also suggest you download a free plugin which can help you handle this issue. It's called jQuery Easy, and it's available here: http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327
Please notice: we are NOT responsible for any damage that may be caused by using the jQuery Easy plugin. The plugin needs to installed, enabled and configured manually.
The recommended settings for this plugin are: under the 'Basic Site Options' select 'Enable jQuery field jQuery' or 'JQuery+jQuery UI (select one of them, according to your specific needs). Under version select 1.8, set the order of the plugin to last - and you're ready to go!