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.

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

Relative to an Element:

Relative to an Image:

Manually trigger Main Menu or any Group on user action:

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

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

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.

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

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

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.

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.

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.

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

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.

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.

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

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.

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

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.

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.

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>

Visit
www.likno.com
for more information

How to position a JavaScript menu in Joomla

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to How to position a JavaScript menu in Joomla

Similar to How to position a JavaScript menu in Joomla (20)

Recently uploaded

Recently uploaded (20)

How to position a JavaScript menu in Joomla