Joomla Menu examples
Joomla Menu/AllWebMenus features
The AllWebMenus Joomla Menu add-in & component combination is designed to retrieve your Joomla menu from your Joomla website and import it into the AllWebMenus application to create stylish, feature-rich navigation menus, but not only! Apart from creating menu items derived from your joomla menu structure, fully customize your menus adding your own non-joomla menu items with external or internal links, html-rich content, colors, borders, effects, designs of your choice and many more!
The solution consists of a combination of two parts:
This already exists inside your AllWebMenus installation (v5.1.758 or above only - no need to download and install separately), and can be accessed through the following menu:
You can use the add-in to specify the blog's domain you create a menu for, import/update the menu structure from your blog and eventually compile the menu for use on your Joomla site.
Click here for licensing details.
This is the component that you need to install 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).
Step 1 - Configure your menu
While in Joomla:
- Login to the Admin area of your Joomla site
- Go to the "Components -> AllWebMenus -> Generate Menu Structure Code" item of the Joomla administration menu
- Select from the list which Joomla menu you want to import to the AllWebMenus application and go to the next step
- Select the items of the menu that you do not wish to update in AllWebMenus (if the menu has already been edited in AllWebMenus) both for the <Text> and the <Link> property of the items
- Select "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 how/where your menu is "positioned" inside your Joomla pages
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" (recommended!)
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.
Step 3 - Setup, Compile and Upload the menu files
While in AllWebMenus:
- Choose the Domain where the menu will be used through the "Add-ins -> Joomla Menu -> Setup Joomla Menu/Choose Domain" (item [1] on screenshot).
Note: Domains are based on "Server-Side Menus API domain licenses" and therefore you need to use and purchase them as such. Click here for domain purchase info and licensing details.
- 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
Note: It is necessary to enable the AllWebMenus menu the first time you upload your menu!
what's new
