how to position a javascript menu in joomla

How to position a JavaScript menu in Joomla

&

www.likno.comAllWebMenus Pro

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

In general, there are 4 main choices to position a menu in AllWebMenus Pro: Relative to Window:

www.likno.comAllWebMenus Pro

Relative to an Element:

www.likno.comAllWebMenus Pro

Relative to an Image:

www.likno.comAllWebMenus Pro

Manually trigger Main Menu or any Group on user action:

www.likno.comAllWebMenus Pro

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

www.likno.comAllWebMenus Pro

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

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

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

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

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

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

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

So, after you have uploaded the produced zip file click on Extensions -> Module Manager.

www.likno.comAllWebMenus Pro

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

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

Then, just visit your Joomla website and you will see the menu displayed in the position you chose.

www.likno.comAllWebMenus Pro

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

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

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

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

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

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

Visit www.likno.com

for more information

www.likno.comAllWebMenus Pro