Joomla Menu Add-in & Component

Joomla Menu examples
Joomla Menu/AllWebMenus features

The solution consists of a combination of 2 parts:

Our AllWebMenus Pro application... (1/2)

Use the application's "Joomla Menu Add-in" to setup your menu for your specific Joomla website, import/update the menu structure from there and eventually compile the menu for use on your Joomla website. Licensing details.

&  ...our special Joomla Component for AllWebMenus Pro (2/2)

Install the component online on your Joomla website.

Through the component you can choose your Joomla menu (created by the default menu module), what information of your site should be part of your menu, with what menu hierarchy and what options.

Note that you are not restricted to the joomla menu structure for your menu items. You can create menus with your own menu items regardless of the joomla menu structure (see "Static" or "Mixed" population method below).

The Joomla component supports 3 menu population methods:

• "Dynamic" population: The menu is populated with items dynamically (online), based on a Joomla menu. The AllWebMenus project is used to provide only the styling/behaviors of the menu; not its items.
• "Static" population: The menu is populated with items edited within AllWebMenus only. Any changes to your online website do not affect your menu items. So, AllWebMenus provides both the structure and the styling/behaviors of the menu.
• "Mixed" population: This is a mix of "Dynamic" and "Static". The menu is populated both with items edited within AllWebMenus and with items created online (through a Joomla menu).

Watch how you can Download AllWebMenus Joomla Component, install it and use it.

Download and install the AllWebMenus Component on your Joomla website

Step 1: Download the component's ZIP file

Download Component for Joomla v3+

Download Component for Joomla v1.6-v2.5

For Joomla v1.5 or below, click here

Important Note! If you are updating from an older version, note that the instructions have changed and an extra step is now required for your menu to show (see at the end of the page).

Step 2: Install the component to your Joomla site

• Login to your Joomla administrator area
• Install the component by selecting the "Extensions > Extension Manager" item of the Joomla administration menu

Configure and use the "AllWebMenus Component" on Joomla

Step 1: Configure your menu

While in Joomla:

• Login to the Admin area of your Joomla site
• Go to the "Components -> AllWebMenus Pro" item of the Joomla administration menu
• Configure the menu options
• Click "Generate Menu Structure Code"
• Copy the generated code

Switch to the AllWebMenus desktop application:

• Go to the "Add-ins -> Joomla Menu" options:

• Choose the "Import/Update Menu Structure from Joomla" option (item [2] on screenshot)
• Paste the "Menu Structure Code" previously copied from Joomla
• Configure further your menu (colors, borders, effects, styles, etc.) through the AllWebMenus properties or add your own custom items with their own external or internal links

Step 2: Choose menu "positioning"

While in AllWebMenus, choose the Positioning property:

There are 3 different ways to position your menu in your pages:

• "Relative to Window"
  You can position your menu relative to the browser window:

• "Relative to an Element"
  You can position your menu relative to a common element that exists in all pages of your Joomla site.
  
  I order to do so, you need to find and copy the id of that element by viewing the source code of a Joomla page ("Preview" function). Since Joomla does not add an id to all page elements, you need to choose an element that does have one.
  
  In AllWebMenus, choose the "Relative to an Element" positioning option and paste the copied id value at the "Custom ID" property.
  
  Don't forget to also adjust the "Element Anchor", "Menu Anchor" and positioning "Offsets".
  
• "Relative to an Image"
  You can position your menu relative to a common image that exists in all pages of your Joomla site.
  
  Find the filename of that image...
  ...and enter it at the "Image Filename" property:
  
  Don't forget to also adjust the "Element Anchor", "Menu Anchor" and positioning "Offsets".
  
  This is the recommended positioning method as it is easier than the "element" one, which requires an id but Joomla does not always create an id for all elements.
  
  We also provide a placeholder image for you to use if you do not want to use one of your existing images for positioning. This is a transparent 1x1 image, named allwebmenusanchor.gif and can be found in the "AddIns Joomla" subfolder of the AllWebMenus installation.
  
  You can add a Custom HTML Module in Joomla (Module Manager New Custom HTML) and import this image there.

View how positioning works through detailed examples/use cases

Step 3: Setup, Compile and Upload the menu files

While in AllWebMenus:

• Compile the menu using the "Add-ins Joomla Menu Compile Joomla Menu" (item [3] on screenshot).
  Note: When asked for "Site_Root folder" use any local folder on your hard drive you like for the compiled files to be produced.
  These files will be added in a ZIP file that will contain all the necessary menu files.
• Upload the compiled menu (the ZIP file mentioned above) via the Joomla administrator area. Go to "Components AllWebMenus Upload Compiled Menu ZIP file", select the menu file from the location you selected above and upload it. Your AllWebMenus menu has been successfully uploaded and installed. You will now be able to view the menu on your Joomla website.
• If you do not see the menu, please check one of the following:
  • You forgot to enable the AllWebMenus menu through the "Plugin Manager"
  • Your menu is positioned "Relative to an Element" (or Image) but you did not specify an available "Element ID" or "Image Name" in the related property of AllWebMenus
  • You forgot to set the Module to appear in all pages:
    
    
  Note: It is necessary to enable the AllWebMenus menu the first time you upload your menu!