Examples of Joomla websites using the AllWebMenus Joomla Menu Component

In the sections below you can view some examples on how to position your menu created using the Joomla component on your Joomla website depending on the use case.

How to use the add-in/component & download instructions

In this example we have used two menus: one is positioned relative to an element and the other positioned relative to an image of the page.

This is how the two menus will look in your Joomla site:

Click on the image to view the example live

The menu that has replaced the default "top menu" of Joomla is the one that has used the "Relative to an Element" positioning method. In order to position this menu the following steps were taken:

• Previewed our Joomla site in our browser
• Viewed the current page's source code
• Found the element where the "top menu" is positioned - in this case it is a <div id="pillmenu"> element (it is the same in all the site's pages)
• Copied the ID property of the element into the "Custom ID" property of the "Relative to an Element" tab in the Positioning options (as shown in image1 below)

 

Image 1

 

The other menu has replaced the default "main menu" of Joomla. In order to position that menu we have used the "Relative to an Image" positioning method, and thus taken the following steps:

• Added a new Custom HTML "Module" in Joomla that contains simply a transparent 1x1 image called 'allwebmenusanchor.gif' (included in the Joomla Addin's folder where AllWebMenus is installed in your machine)
• Selected the "Relative to an Image" tab in the Positioning options of the menu
• Added the name of the image 'allwebmenusanchor.gif' into the Image Filename field (as shown in image2 below)

In addition, the second menu is using the Floating Menu feature (applied by changing the <Menu Floats on Scroll> property in the application) in order to keep the menu visible in the same position while scrolling using smooth (you can also use immediate) scroll.

You can also use the "Advanced Floating Menu Add-in" for conditional floating effects!

 

Image 2

 

You can position your menu relative to your browser's borders by selecting the "Relative to Window" positioning method.

This is how the menu will look in your Joomla site:

Click on the image to view the example live

In this example we have replaced the default "top menu" of Joomla with a more enhanced menu. In order to do that, we have positioned the menu relative to the browser's "Top Side Center". The offsets are set in order for the menu to be positioned exactly where the default menu is.

The "Relative to Window" positioning is not suggested when you want to position your menu in a place where in different screen resolutions or browser's sizes there might be content of the page. In our case, the center of the browser is more or less the same in all resolutions/sizes.

These are the settings for the Main Menu Group's "Positioning" property:

 

 

In this example we have positioned our menu using the "Relative to an Image" method (exactly as in Example 1 - the floating menu), but now we have positioned the menu above another module in the page.

This is how the menu will look in your Joomla site:

Click on the image to view the example live

In such case, when we inserted the transparent 1x1 image (as described in Example 1 above), we also inserted a few <p> </p> in order for the module to reserve the necessary space that the menu will take up.

The settings for the Main Menu Group's "Positioning" are exactly the same as in Example 1 above.