This document discusses how to position JavaScript menus in Joomla using AllWebMenus Pro. There are four main options for positioning menus: relative to the window, relative to an element, relative to an image, or manually triggering the menu on user action. For each option, the document provides steps for configuring the menu positioning in AllWebMenus Pro and displaying the menu in Joomla.

1. How to position a JavaScript menu
in Joomla
&
www.likno.comAllWebMenus Pro

2. In this presentation we will show you how to position your
JavaScript menu in your Joomla website, through
AllWebMenus Pro and the AllWebMenus Joomla Component.
www.likno.comAllWebMenus Pro

3. In general, there are 4 main choices to position a menu in
AllWebMenus Pro:
Relative to Window:
www.likno.comAllWebMenus Pro

4. Relative to an Element:
www.likno.comAllWebMenus Pro

5. Relative to an Image:
www.likno.comAllWebMenus Pro

6. Manually trigger Main Menu or any Group on user action:
www.likno.comAllWebMenus Pro

7. While you are in AllWebMenus Pro, you can set the Menu Positioning by
clicking on “Menu Positioning” button.
www.likno.comAllWebMenus Pro

8. Let’s see each choice separately and the steps needed to be
done in AllWebMenus Pro and in AllWebMenus Joomla
Component.
www.likno.comAllWebMenus Pro

9. First, let’s see the “Relative to Window” positioning. Click on “Menu Positioning” and
choose “Relative to Window”. You are able to also set the Window Anchor and the
Offsets.
www.likno.comAllWebMenus Pro

10. Then, you need to Compile your menu project for Joomla and upload the zip file
through your AllWebMenus Joomla Component panel.
www.likno.comAllWebMenus Pro

11. Then, just visit your Joomla website and you will see the menu displayed where you
placed it relative to the window.
www.likno.comAllWebMenus Pro

12. Let’s see the “Relative to an Element” positioning. Click on “Menu Positioning” and
choose “Relative to an Element”. You see that you have 2 choices, relative to the
Default ID or relative to a Custom ID (in which you can type your custom ID). You are
able to also set the Window Anchor and the Offsets.
www.likno.comAllWebMenus Pro

13. If you know that you have a specific ID in your Joomla website or you want to
manually add it, you can choose the Custom ID. Then, you only need to compile your
menu project and upload the zip file to your Joomla.
The menu will be displayed on your pages as long as the custom ID exists on them.
www.likno.comAllWebMenus Pro

14. If you choose the Default ID you need to also compile and upload the zip file. Then, in
order for the menu to be displayed you need to publish the specific AllWebMenus
Module that is created for your menu.
www.likno.comAllWebMenus Pro

15. So, after you have uploaded the produced zip file click on Extensions -> Module
Manager.
www.likno.comAllWebMenus Pro

16. Search for “AllWebMenus” and you will see that a module with the name of your
menu is created. You can click on that to select the position where you want it to
appear.
www.likno.comAllWebMenus Pro

17. Choose the Position where you want your menu to be displayed. Also, make sure that
the status is set to Published. Then, the menu should appear where you selected.
www.likno.comAllWebMenus Pro

18. Then, just visit your Joomla website and you will see the menu displayed in the
position you chose.
www.likno.comAllWebMenus Pro

19. Let’s see the “Relative to an Image” positioning. Click on “Menu Positioning” and
choose “Relative to an Image”. Type the Image Filename. Note that the image should
exist in your page. Then, you can also set the Anchors and Offsets.
www.likno.comAllWebMenus Pro

20. Then, you need to Compile your menu project for Joomla and upload the zip file
through your AllWebMenus Joomla Component panel.
www.likno.comAllWebMenus Pro

21. Then, just visit your Joomla website and you will see the menu displayed where you
placed it relative to the image.
www.likno.comAllWebMenus Pro

22. Now, let’s see the Manually trigger Main Menu or any Group on user action.
This is a more advanced method to show your menu and it requires that you insert
some code on your Joomla page.
Click on Click here to generate the “Trigger Code” for Main Menu or any Group.
www.likno.comAllWebMenus Pro

23. You are able to select if the menu will be triggered on Mouse Over or on Mouse Click.
You can choose the Positioning Element as well as the Anchors and Offsets for the
menu. Finally, you can click on “Copy” to copy the produced code.
Of course, when you are done you need to compile your menu project and upload
the produced zip file to your Joomla.
www.likno.comAllWebMenus Pro

24. In order for the menu to appear on your page, you need to paste in your menu trigger
element the code you copied in AllWebMenus Pro.
So, you could have for example a button that clicking on it the menu would be
displayed:
<button onclick="awmShowGroup('menu-gr0',0,0,0,0,this);"
onmouseout="awmHideMenu('menu');" >Click here</button>
www.likno.comAllWebMenus Pro

25. Visit
www.likno.com
for more information
www.likno.comAllWebMenus Pro